You are viewing limited content. For full access, please sign in.

Question

Question

Force table column to be smaller

Forms Version 10
Updated February 6, 2019
asked on February 4, 2019

I can't seem to get this last column in this table to accept that I want it to be narrower. 

I have tried targeting it numerous ways. I am successful in targeting the field to get it to be right aligned (see below)  It is [id^="Field257"].  If I can force it to be smaller, then the other columns will have more room for the words that are being cut off right now.

Table configuration is 

and inside the field options it is marked as x-large (although I have tried Small, as well, numerous times).

I also have this CSS going on, which I was able to get from another post to make the lines closer together:

What else can I try?

0 0

Answer

SELECTED ANSWER
replied on February 5, 2019 • Show version history

I add the following to all my forms. I then add the class (width10, width50, wirdth75, etc) to the field I want to define with that width. It's proven to be extremely convenient and helpful.

/*Field Formatting*/
.width10 {width: 10%!important;}
.width20 {width: 20%!important;}
.width25 {width: 25%!important;}
.width30 {width: 30%!important;}
.width40 {width: 40%!important;}
.width50 {width: 50%!important;}
.width60 {width: 60%!important;}
.width70 {width: 70%!important;}
.width75 {width: 75%!important;}

Add it to the CSS section of the 'CSS and JavaScript' tab:

 

Hope this helps,

Chris

1 0
replied on February 6, 2019

Thank you, Chris, that worked and I will be able to use this for other forms and am excited to have it!

One problem:  In order to get this to work, I had to take out the coding to get the table to tighten up (less room between the lines, etc.).  Do you have CSS code that works with this field formatting that will remove space between columns and/or lines?

What I took out was the last clipshot shown in my post above (the .myTable group).

 

1 0
replied on February 6, 2019

Okay, answered my own question.  I just took some of the lines and kept removing some until I got what I wanted.  These four lines are needed to get the best end result:

Line 10 was to get the far right side space (with the X for removal) as tight as possible.

Line 11 was to get the number field right aligned.

Line 13 tightened up the space between lines.

Line 12 tightened up the space between lines even more.

 

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...