MachForm Community Forums Topic: Is there a way to set different widths to columns?

MachForm Community Forums Topic: Is there a way to set different widths to columns? https://www.machform.com/forums/ MachForm Community Forums Topic: Is there a way to set different widths to columns? en Sat, 06 Jun 2026 03:19:19 +0000 williamansley on "Is there a way to set different widths to columns?" https://www.machform.com/forums/topic/is-there-a-way-to-set-different-widths-to-columns#post-24686 Wed, 13 Jan 2016 03:50:31 +0000 williamansley 24686@https://www.machform.com/forums/ 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;} uwtsd on "Is there a way to set different widths to columns?" https://www.machform.com/forums/topic/is-there-a-way-to-set-different-widths-to-columns#post-24684 Wed, 13 Jan 2016 00:16:29 +0000 uwtsd 24684@https://www.machform.com/forums/ 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. <pre><code><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></code></pre> The advanced CSS doesn't seem to do anything, any suggestions. Markstein on "Is there a way to set different widths to columns?" https://www.machform.com/forums/topic/is-there-a-way-to-set-different-widths-to-columns#post-24611 Fri, 25 Dec 2015 06:50:03 +0000 Markstein 24611@https://www.machform.com/forums/ 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: <pre><code><div> <input id="element_5" name="element_5" class="element text medium" type="text" value=""> </div></code></pre> 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: <code>#element_5 {max-width: 100px;}</code> 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: <pre><code><div> <input id="element_6" name="element_6" class="element text medium" type="text" value=""> </div></code></pre> So in your Advanced CSS you would enter: <code>#element_6 {max-width: 175px;}</code> 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. uwtsd on "Is there a way to set different widths to columns?" https://www.machform.com/forums/topic/is-there-a-way-to-set-different-widths-to-columns#post-24608 Wed, 23 Dec 2015 19:02:49 +0000 uwtsd 24608@https://www.machform.com/forums/ 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?