MachForm Community Forums » MachForm 4

1. uwtsd
   Member

   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 8 years ago #

2. Markstein
   Member

   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 8 years ago #

3. uwtsd
   Member

   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 #

4. williamansley
   Member

   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 #

RSS feed for this topic

Reply

You must log in to post.