column adjustments Rich Text Editor

I am trying to do the same thing but the column adjustments do not do anything to the width. They will change the height when I adjust the rows, but the columns do nothing. I've tried CSS, I've tried everything. I have a few essay questions on an application & I want only those rich text fields to be wider. Any help you can offer is appreciated! I inspected the CSS and found that there is a max width of 400px set to apparently all kinds of input fields, but when I tried to add CSS to just change the text area, it did nothing.

I could replicate the issue. I am forwarding this to Level 2 team so they can look into it and update you

Thanks for your patience.

Hey fullycreative,

The thing is, when applying some of the form themes, they go through their jobs through inline-CSS and that's why one cannot override them.

I checked your form via modifying its URL by adding &old tag at the end. This way you are able to use the old UI and when you go to your form properties you can see the injected CSS code by the theme you have chosen.

At this point, you have two choices. You can either delete all of the CSS which the theme injected and design your form from scratch or, you can alter this code in a way which will not override the column width of your text-areas.

For your convenience, I went through and altered the code which resulted neatly in my opinion. Here is the clone of your form with the altered CSS (I also changed the label alignments of the three fields that comes after the birth date field to top)

https://form.jotform.com/70225738676969

Here is the CSS code which you can inject while you are in the old UI: (I tried to shrink the code snippet but was unsuccesful :))

@import "https://fonts.googleapis.com/css?family=Roboto:light,lightitalic,normal,italic,bold,bolditalic|Didact Gothic:light,lightitalic,normal,italic,bold,bolditalic"; .form-all { font-family: "Roboto", sans-serif; } .form-all { width: 800px; width: 100%; max-width: 800px; } .form-label-left, .form-label-right { width: 150px; } .form-label { white-space: normal; } .form-label.form-label-auto { display: inline-block; float: left; text-align: left; width: 150px; } .form-label-left { display: inline-block; white-space: normal; float: left; text-align: left; } .form-label-right { display: inline-block; white-space: normal; float: left; text-align: right; } .form-label-top { white-space: normal; display: block; float: none; text-align: left; } .form-all { font-size: 14px; } .form-label { font-weight: bold; } .form-checkbox-item label, .form-radio-item label { font-weight: normal; } .supernova { background-color: #ffffff; background-color: #0fa5d9; } .supernova body { background-color: transparent; } /* @width30: (unit(@formWidth, px) + 60px); @width60: (unit(@formWidth, px)+ 120px); @width90: (unit(@formWidth, px)+ 180px); */ /* | */ @media screen and (min-width: 480px) { .supernova .form-all { border: 1px solid #0c81a9; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1); } } /* | */ /* | */ @media screen and (max-width: 480px) { .jotform-form { padding: 10px 0; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 768px) { .jotform-form { padding: 30px 0; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 799px) { .jotform-form { padding: 30px 0; } } /* | */ /* | */ @media screen and (min-width: 768px) { .jotform-form { padding: 60px 0; } } /* | */ /* | */ @media screen and (max-width: 799px) { .jotform-form { padding: 0; } } /* | */ .supernova .form-all, .form-all { background-color: #ffffff; border: 1px solid transparent; } .form-header-group { border-color: #e6e6e6; } .form-matrix-table tr { border-color: #e6e6e6; } .form-matrix-table tr:nth-child(2n) { background-color: #f2f2f2; } .form-all { color: #000000; } .form-header-group .form-header { color: #000000; } .form-header-group .form-subHeader { color: #1a1a1a; } .form-sub-label { color: #1a1a1a; } .form-label-top, .form-label-left, .form-label-right, .form-html { color: #000000; } .form-checkbox-item label, .form-radio-item label { color: #1a1a1a; } .form-line.form-line-active { -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; background-color: #ffffe0; } /* ömer */ .form-radio-item, .form-checkbox-item { padding-bottom: 0px !important; } .form-radio-item:last-child, .form-checkbox-item:last-child { padding-bottom: 0; } /* ömer */ [data-type="control_radio"] .form-input, [data-type="control_checkbox"] .form-input, [data-type="control_radio"] .form-input-wide, [data-type="control_checkbox"] .form-input-wide { width: 100%; max-width: 800px; } .form-radio-item, .form-checkbox-item { width: 100%; max-width: 800px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-textbox.form-radio-other-input, .form-textbox.form-checkbox-other-input { width: 80%; margin-left: 3%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-multiple-column { width: 100%; } .form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item { width: 10%; } .form-multiple-column[data-columncount="1"] .form-radio-item, .form-multiple-column[data-columncount="1"] .form-checkbox-item { width: 100%; } .form-multiple-column[data-columncount="2"] .form-radio-item, .form-multiple-column[data-columncount="2"] .form-checkbox-item { width: 50%; } .form-multiple-column[data-columncount="3"] .form-radio-item, .form-multiple-column[data-columncount="3"] .form-checkbox-item { width: 33.33333333%; } .form-multiple-column[data-columncount="4"] .form-radio-item, .form-multiple-column[data-columncount="4"] .form-checkbox-item { width: 25%; } .form-multiple-column[data-columncount="5"] .form-radio-item, .form-multiple-column[data-columncount="5"] .form-checkbox-item { width: 20%; } .form-multiple-column[data-columncount="6"] .form-radio-item, .form-multiple-column[data-columncount="6"] .form-checkbox-item { width: 16.66666667%; } .form-multiple-column[data-columncount="7"] .form-radio-item, .form-multiple-column[data-columncount="7"] .form-checkbox-item { width: 14.28571429%; } .form-multiple-column[data-columncount="8"] .form-radio-item, .form-multiple-column[data-columncount="8"] .form-checkbox-item { width: 12.5%; } .form-multiple-column[data-columncount="9"] .form-radio-item, .form-multiple-column[data-columncount="9"] .form-checkbox-item { width: 11.11111111%; } .form-single-column .form-checkbox-item, .form-single-column .form-radio-item { width: 100%; } .supernova { height: 100%; background-repeat: no-repeat; background-attachment: scroll; background-position: center top; background-repeat: repeat; } .supernova { background-image: none; } #stage { background-image: none; } /* | */ .form-all { background-repeat: no-repeat; background-attachment: scroll; background-position: center top; background-repeat: repeat; } .form-header-group { background-repeat: no-repeat; background-attachment: scroll; background-position: center top; } .form-line { margin-top: 10px; margin-bottom: 10px; } .form-line { padding: 7px 36px; } .form-all .form-textbox, .form-all .form-radio-other-input, .form-all .form-checkbox-other-input, .form-all .form-captcha input, .form-all .form-spinner input, .form-all .form-pagebreak-back, .form-all .form-pagebreak-next, .form-all .qq-upload-button, .form-all .form-error-message { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-all .form-textarea { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-dropdown { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: button; appearance: none; margin: 0; } .form-all { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .form-section:first-child { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .form-section:last-child { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { font-size: 1em; padding: 9px 15px; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: normal; } .form-all .form-pagebreak-back, .form-all .form-pagebreak-next { font-size: 1em; padding: 9px 15px; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: normal; } /* & when ( @buttonFontType = google ) { @import (css) "@{buttonFontLink}"; } */ h2.form-header { line-height: 1.618em; font-size: 1.714em; } h2 ~ .form-subHeader { line-height: 1.5em; font-size: 1.071em; } .form-header-group { text-align: left; } .form-line { zoom: 1; } .form-line:before, .form-line:after { display: table; content: ''; line-height: 0; } .form-line:after { clear: both; } .form-sub-label-container { margin-right: 0; float: left; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-sub-label-container .date-separate { visibility: hidden; } .form-captcha input, .form-spinner input { width: 400px; } .form-textarea { width: 100%; max-width: 720px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-textbox { width: 100%; max-width: 400px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-input, .form-address-table, .form-matrix-table { width: 100%; max-width: 400px; } .form-radio-item, .form-checkbox-item { width: 100%; max-width: 400px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-textbox.form-radio-other-input, .form-textbox.form-checkbox-other-input { width: 80%; margin-left: 3%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-multiple-column { width: 100%; } .form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item { width: 10%; } .form-multiple-column[data-columncount="1"] .form-radio-item, .form-multiple-column[data-columncount="1"] .form-checkbox-item { width: 100%; } .form-multiple-column[data-columncount="2"] .form-radio-item, .form-multiple-column[data-columncount="2"] .form-checkbox-item { width: 50%; } .form-multiple-column[data-columncount="3"] .form-radio-item, .form-multiple-column[data-columncount="3"] .form-checkbox-item { width: 33.33333333%; } .form-multiple-column[data-columncount="4"] .form-radio-item, .form-multiple-column[data-columncount="4"] .form-checkbox-item { width: 25%; } .form-multiple-column[data-columncount="5"] .form-radio-item, .form-multiple-column[data-columncount="5"] .form-checkbox-item { width: 20%; } .form-multiple-column[data-columncount="6"] .form-radio-item, .form-multiple-column[data-columncount="6"] .form-checkbox-item { width: 16.66666667%; } .form-multiple-column[data-columncount="7"] .form-radio-item, .form-multiple-column[data-columncount="7"] .form-checkbox-item { width: 14.28571429%; } .form-multiple-column[data-columncount="8"] .form-radio-item, .form-multiple-column[data-columncount="8"] .form-checkbox-item { width: 12.5%; } .form-multiple-column[data-columncount="9"] .form-radio-item, .form-multiple-column[data-columncount="9"] .form-checkbox-item { width: 11.11111111%; } [data-type="control_dropdown"] .form-dropdown { width: 100% !important; max-width: 400px; } [data-type="control_fullname"] .form-sub-label-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 48%; } [data-type="control_fullname"] .form-sub-label-container:first-child { margin-right: 4%; } [data-type="control_phone"] .form-sub-label-container { width: 65%; } [data-type="control_phone"] .form-sub-label-container:first-child { width: 32.5%; margin-right: 2.5%; } [data-type="control_birthdate"] .form-sub-label-container { width: 22%; margin-right: 3%; } [data-type="control_birthdate"] .form-sub-label-container:first-child { width: 50%; } [data-type="control_birthdate"] .form-sub-label-container:last-child { margin-right: 0; } [data-type="control_birthdate"] .form-sub-label-container .form-dropdown { width: 100%; } [data-type="control_time"] .form-sub-label-container { width: 37%; margin-right: 3%; } [data-type="control_time"] .form-sub-label-container:last-child { width: 20%; margin-right: 0; } [data-type="control_time"] .form-sub-label-container .form-dropdown { width: 100%; } [data-type="control_datetime"] .form-sub-label-container { width: 28%; margin-right: 4%; } [data-type="control_datetime"] .form-sub-label-container:last-child { width: 4%; margin-right: 0; } [data-type="control_datetime"].allowTime .form-sub-label-container { width: 12%; margin-right: 3%; } [data-type="control_datetime"].allowTime .form-sub-label-container:last-child { width: 4%; margin-right: 0; } [data-type="control_datetime"].allowTime .allowTime-container { float: right; width: 51%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container { width: 27%; margin-right: 4%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:first-child { width: 4%; margin-left: 3%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:last-child { width: 27%; margin-right: 0; } [data-type="control_datetime"].allowTime .form-dropdown { width: 100%; } [data-type="control_payment"] .form-sub-label-container { width: auto; } [data-type="control_payment"] .form-sub-label-container .form-dropdown { width: 100%; } .form-address-table td .form-dropdown { width: 100%; } .form-address-table td .form-sub-label-container { width: 96%; } .form-address-table td:last-child .form-sub-label-container { margin-left: 4%; } .form-address-table td[colspan="2"] .form-sub-label-container { width: 100%; margin: 0; } /*.form-dropdown, .form-radio-item, .form-checkbox-item, .form-radio-other-input, .form-checkbox-other-input,*/ .form-captcha input, .form-spinner input, .form-error-message { padding: 4px 3px 2px 3px; } .form-header-group { font-family: "Didact Gothic", sans-serif; } .form-section { padding: 0px 0px 0px 0px; } .form-header-group { margin: 12px 36px 12px 36px; } .form-header-group { padding: 24px 0px 24px 0px; } .form-header-group .form-header, .form-header-group .form-subHeader { color: #000000; } .form-textbox, .form-textarea { padding: 4px 3px 2px 3px; } .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input { background-color: #ffffff; } .form-textarea { width: 100%; max-width: 720px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; .form-textbox { width: 100%; max-width: 400px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } [data-type="control_textbox"] .form-input, [data-type="control_textarea"] .form-input, [data-type="control_fullname"] .form-input, [data-type="control_phone"] .form-input, [data-type="control_datetime"] .form-input, [data-type="control_address"] .form-input, [data-type="control_email"] .form-input, [data-type="control_passwordbox"] .form-input, [data-type="control_autocomp"] .form-input, [data-type="control_textbox"] .form-input-wide, //[data-type="control_textarea"] .form-input-wide, [data-type="control_fullname"] .form-input-wide, [data-type="control_phone"] .form-input-wide, [data-type="control_datetime"] .form-input-wide, [data-type="control_address"] .form-input-wide, [data-type="control_email"] .form-input-wide, [data-type="control_passwordbox"] .form-input-wide, [data-type="control_autocomp"] .form-input-wide { width: 100%; max-width: 400px !important; } [data-type="control_fullname"] .form-sub-label-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 48%; } [data-type="control_fullname"] .form-sub-label-container:first-child { margin-right: 4%; } [data-type="control_phone"] .form-sub-label-container { width: 65%; } [data-type="control_phone"] .form-sub-label-container:first-child { width: 32.5%; margin-right: 2.5%; } [data-type="control_phone"] .form-sub-label-container .date-separate { visibility: hidden; } [data-type="control_datetime"] .form-sub-label-container { width: 28%; margin-right: 4%; } [data-type="control_datetime"] .form-sub-label-container:last-child { width: 4%; margin-right: 0; } [data-type="control_datetime"] .form-sub-label-container .date-separate { visibility: hidden; } [data-type="control_datetime"].allowTime .form-sub-label-container { width: 12%; margin-right: 3%; } [data-type="control_datetime"].allowTime .form-sub-label-container:last-child { width: 4%; margin-right: 0; } [data-type="control_datetime"].allowTime .allowTime-container { float: right; width: 51%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container { width: 27%; margin-right: 4%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:first-child { width: 4%; margin-left: 3%; } [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:last-child { width: 27%; margin-right: 0; } [data-type="control_datetime"].allowTime .form-dropdown { width: 100%; } .form-matrix-table { width: 100%; max-width: 400px; } .form-address-table { width: 100%; max-width: 400px; } .form-address-table td .form-dropdown { width: 100%; } .form-address-table td .form-sub-label-container { width: 96%; } .form-address-table td:last-child .form-sub-label-container { margin-left: 4%; } .form-address-table td[colspan="2"] .form-sub-label-container { width: 100%; margin: 0; } [data-type="control_dropdown"] .form-input, [data-type="control_birthdate"] .form-input, [data-type="control_time"] .form-input, [data-type="control_dropdown"] .form-input-wide, [data-type="control_birthdate"] .form-input-wide, [data-type="control_time"] .form-input-wide { width: 100%; max-width: 150px; } [data-type="control_dropdown"] .form-dropdown { width: 100% !important; max-width: 150px; } [data-type="control_birthdate"] .form-sub-label-container { width: 22%; margin-right: 3%; } [data-type="control_birthdate"] .form-sub-label-container:first-child { width: 50%; } [data-type="control_birthdate"] .form-sub-label-container:last-child { margin-right: 0; } [data-type="control_birthdate"] .form-sub-label-container .form-dropdown { width: 100%; } [data-type="control_time"] .form-sub-label-container { width: 37%; margin-right: 3%; } [data-type="control_time"] .form-sub-label-container:last-child { width: 20%; margin-right: 0; } [data-type="control_time"] .form-sub-label-container .form-dropdown { width: 100%; } .form-label { font-family: "Roboto", sans-serif; } li[data-type="control_image"] div { text-align: left; } li[data-type="control_image"] img { border: none; border-width: 0px !important; border-style: solid !important; border-color: false !important; } .form-line-column { width: auto; } .form-line-error { overflow: hidden; -webkit-transition-property: none; -moz-transition-property: none; -ms-transition-property: none; -o-transition-property: none; transition-property: none; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; background-color: #fff4f4; } .form-line-error .form-error-message { background-color: #ff3200; clear: both; float: none; } .form-line-error .form-error-message .form-error-arrow { border-bottom-color: #ff3200; } .form-line-error input:not(#coupon-input), .form-line-error textarea, .form-line-error .form-validation-error { border: 1px solid #ff3200; -webkit-box-shadow: 0 0 3px #ff3200; -moz-box-shadow: 0 0 3px #ff3200; box-shadow: 0 0 3px #ff3200; } .ie-8 .form-all { margin-top: auto; margin-top: initial; } .ie-8 .form-all:before { display: none; } /* | */ @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) { .jotform-form { padding: 0; } .form-all { border: 0; width: 100% !important; max-width: initial; } .form-sub-label-container { width: 100%; margin: 0; } .form-input { width: 100%; } .form-label { width: 100%!important; } .form-line { padding: 2% 5%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input[type=text], input[type=email], input[type=tel], textarea { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: initial !important; } .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown { max-width: initial !important; } div.form-header-group { padding: 24px 0px !important; margin: 0 12px 2% !important; margin-left: 5% !important; margin-right: 5% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } [data-type="control_button"] { margin-bottom: 0 !important; } .form-buttons-wrapper { margin: 0!important; } .form-buttons-wrapper button { width: 100%; } table { width: 100%!important; max-width: initial !important; } table td + td { padding-left: 3%; } .form-checkbox-item input, .form-radio-item input { width: auto; } .form-collapse-table { margin: 0 5%; } } /* | *//*__INSPECT_SEPERATOR__*/ .form-section.page-section {}

 

Cheers!

Thank you for working on this! It seems like the first essay in the application didn't get any wider though... I know there's conditional logic that makes different ones display so maybe that one got missed. I appreciate your help!
-Sarah
...

Hey Sarah,

Actually, I didn't change the column width property of the text-fields, I just set the max-width limit to 720 pixels which were limited to 400 pixels by the CSS of the theme.

All of the rich text areas are set to 150 except the first one which carries the value of 50. So you can give any value you want.

Thank you for your gratitude, let us know if you ever need anything else,

Cheers!