Resize cells for vertical text | Formidable Plus | Forum

I just wanted to update this to say that I originally tested it by putting the entire CSS style into the table cell, which works, but obviously it would be better to put the code into my style.css and just call the class in the table cell.  So I put the code into style.css, and tested the formatting on a page on my site, and it works well.  This is the basic format:

<p class=”css-vertical-text”>Making a Clear Request</p>

But if I put that into the table cell, it doesn't work; could it be that something in the table code is preventing the call to the class?  If someone has time to look at the main issue (resizing the column header cells to fit the vertical text), maybe you could think of a solution to this at the same time?

Thanks!

btw, this is the CSS that's now living in my style.css file:

p.css-vertical-text {
	color:#000;
	border:0px solid red;
	writing-mode:tb-rl;
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform: rotate(270deg);
	white-space:nowrap;
	display:block;
	bottom:0;
	width:20px;
	height:20px;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
}

Thanks, we're getting closer!  This is now putting the text, aligned vertically, into the column header.  However, it puts every column header into the first column, on top of each other.  What I'm trying to do is create a chart for instructors to input student grades in various areas of study.  What I'm going to want is for the first column to have text fields for student names, 10 or 12 characters wide, and subsequent columns  (there will be around 20 of them) to have the names of the area of study vertically in the column head, with the cells below them just wide enough to accept a 2-character input text field.

You can see the table I'm trying to construct at the bottom of the form here:  http://ecbiz119.inmotionhosting.com/~nappit5/test/

I also inserted a scan of the print chart I'm trying to replicate, below the form, so you can see what I need to accomplish.

Thanks!

Thanks, Trevor, that helps a lot.  This is what I have in there now, which is working well:

 #frm-table-360 thead th{
 color:#000;
 writing-mode:tb-rl;
 -webkit-transform:rotate(270deg);
 -moz-transform:rotate(270deg);
 -o-transform: rotate(270deg);
 white-space:nowrap;
 bottom:0;
 width:20px;
 height:155px;
 font-family: 'Arial', Helvetica, sans-serif;
 font-size:10px;
 font-weight:normal;
 border:solid 1px;
 text-align:center;
 vertical-align:middle;
 padding:0px;
 }

The one last thing I need, in order to get this working perfectly, is control over the column widths 

(10-12 character input fields for the Name column, 2-character input fields for the rest of them).

Any suggestions on how to accomplish that (and btw, excellent tech support! I really appreciate it.)

Continuing… I now realize that setting column-1 input just sets the width of the input field; the column widths are sort of unaffected.  Or rather, unpredictably unaffected.  I put in all 23 of them, and some of them are the correct width, some of them remain far too wide, more or less at random, as far as I can tell.  I've checked all the selectors, and they're all identical, other than the column number specification.

Any suggestions as to how to consistently make columns 1 through 23 exactly 25 pixels wide (allowing a little extra space, since the input field seems to need about 23 pixels to fit two upper case letters in it)?

Thanks!

(oh, and btw, every time I try to post in the forum, it asks me to log in again, and pretty consistently tells me I have the wrong password.  I reset my password, log in, and then the next time it tells me I have the wrong password again… since I've been doing it two or three times a day, as you can tell(!), I know my password pretty well by now, so there seems to be something amiss with the registration/login process… or is it only me that's having this problem?)

Post edited 9:27 pm – May 10, 2012 by Top Quark

More updating:  I’m on a heavy deadline here, so every time I feel like I’ve reached a dead end, I come back here to ask the question, then go back and try again to figure it out for myself!

The latest:  I added 

.frm-table {
	table-layout:fixed;
	 width:100%;
 }

which is keeping the table cells the right width, but has introduced two new problems: first of all, the labels are now too high in their cells, and are running out of the table. I can’t figure out which parameter will move them down, even though I keep trying different methods. Also, the first column is blank… I can’t figure out why that is. It would help if I could use it, because now the Name column is the same narrow width as all the rest, which makes sense since the table is fitting itself into the page width, but it would be good if it was at least as wide as two of the other columns… so it’s a shame to waste that first, empty column. Thanks.

Oh, sorry, the actual site has all these levels of membership, and rather than try to negotiate you through that I've been trying to keep a duplicate of the form outside the member area.  But I forgot the last time I duplicated it to change the membership requirements…

Anyway, if you have a chance to take a look, the url http://ecbiz119.inmotionhosting.com/~nappit5/test/ should work for you now.

And thanks for the hint about the login/password!

John.

Trevor, if I may say so, you are a rock star.  We're 98% of the way there!  In fact, at this point, it's just a little tweaking…  

If you take a look at http://ecbiz119.inmotionhosting.com/~nappit5/test/ you'll see that everything looks pretty much as it should; I ended up doing each header cell with an individual background, because trying to position one graphic for all of them was causing issues across browsers.  This one is a little less efficient because of having to load all those small labels, but it works fine in every browser I tested (a little funky with the input fields overlapping the cell borders slightly in some cases, but it's basically fine).

The last issue is that first blank column; it's a limitation of my knowledge that I don't understand why it's there, I would have thought column-0 would be the first one.  It wouldn't even matter, except that horizontal space is at such a premium in this table that it would help greatly if I could eliminate the blank column and distribute the regained horizontal space across the rest of the columns.

Any thoughts?

Thanks!

Excellent!  It's all good.  One last (minor) thing… is it possible to remove the “delete row” column?  I don't mind if users end up with too many rows, and it would be nice to reclaim that space, too.

Thanks so much…

Nice work!!  

So many times I've spent huge time on complicated solutions only to end up coming back to a simple solution.  Simple and elegant is always the goal.

Cheers
Trevor 

Thanks John.