This forum is no longer open and is for reading/searching only.
Please use our new MachForm Community Forum instead.
MachForm Community Forums » MachForm 4
Is there a way to set different widths to columns?
Started 9 years ago by uwtsd | 4 posts |
-
I have 6 fields and assigned column_6 to each one.
I want the columns to be different widths instead of equal width.I have set the field size to small, medium and large but that just leaves empty spaces between the columns.
I have tried adding some css to the theme, I have added:
.md_period{
width: 10%;
}
.md_code{
width: 20%;
}
.md_title{
width: 30%;
}And assiged md_period, md_code, md_title as the custom CSS class but nothing changes.
Do I need to add anything else to the CSS?Posted 9 years ago # -
You should be able to adjust each field using CSS in the "Advanced CSS" section of your theme. Use your browsers dev tools to inspect the element you want to change the width for.
For example,
Let's say you have a form with 2 single line text fields. The text fields widths are set to Medium in the options of machform. You can override this setting using CSS.
Using the browsers dev tools you inspect the first text field. You see it is in the following code:
<div> <input id="element_5" name="element_5" class="element text medium" type="text" value=""> </div>
The ID is what we are after (your ID will be different). So for this text field it's id="element_5". Now in your advanced CSS you can add the following code:
#element_5 {max-width: 100px;}
Now the field will not have a width greater than 100px. Let's do the same for the other field. Inspect the field and you see this code:
<div> <input id="element_6" name="element_6" class="element text medium" type="text" value=""> </div>
So in your Advanced CSS you would enter:
#element_6 {max-width: 175px;}
Remember that this will effect "all" of your forms if you use the same theme on all forms. You can always copy your theme, take out the Advanced CSS you've entered and assign it to your other forms.
Posted 9 years ago # -
Thanks for the detailed response Mark.
I copied the theme and added the following to advances CSS
#element_11 {max-width: 100px;}
#element_12 {max-width: 100px;}
#element_13 {max-width: 300px;}
#element_14 {max-width: 100px;}
#element_15 {max-width: 100px;}
#element_16 {max-width: 100px;}Nothing changes though, I have cleared cookies and opened in Chrome and Firefox but no change.
If I inspect the form it shows the following.<li id="li_11" class="column_6"></li> <li id="li_12" class="column_6"></li> <li id="li_13" class="column_6"></li> <li id="li_14" class="column_6"></li> <li id="li_15" class="column_6"></li> <li id="li_16" class="column_6"></li>
The advanced CSS doesn't seem to do anything, any suggestions.
Posted 8 years ago # -
You need to use the exact same text as is shown in the id value in the source code for your custom CSS. Based on what you say in in your form's web page source code, your CSS should be:
#id_11 {max-width: 100px;}
#id_12 {max-width: 100px;}
#id_13 {max-width: 300px;}
#id_14 {max-width: 100px;}
#id_15 {max-width: 100px;}
#id_16 {max-width: 100px;}Posted 8 years ago #
Reply
You must log in to post.