-
abdulmughees078Asked on May 22, 2023 at 10:36 PM
Hey Team, I have an issue with the required files. On the customer tab and when I choose the 2nd button the fields open fine, these 8 fields are required. but when I hit the submit button without putting any details some of the field's widths are destroyed can you please check I made a video for you?
Page URL: https://form.jotform.com/231402240106436 -
Nora JotForm SupportReplied on May 23, 2023 at 4:44 AM
Hi Abdul,
Thanks for reaching out to us for help. To make those fields visible in full width, please remove the current CSS codes on your form, and replace it with the following code.
li#id_41 {
top : 400px;
}
label#label_68 {
display : none;
}
label#label_67 {
display : none;
}
label#label_69 {
display : none;
}
label#label_66 {
display : none;
}
.form-header-group {
background-color : #b09240;
color : #ffffff!important;
}
#id_71 {
top : -56em;
}
table {
border-collapse : collapse;
}
#input_2 {
color : white;
}
.form-submit-button:not(.form-sacl-button) {
color : white;
background : #000000;
border-color : black;
font-weight : 600;
}
.form-line-column .form-label {
font-weight : 700;
}
div#text_161 {
background : black;
color : white;
padding : 2px;
width : 30%;
}
div#text_162 {
background : black;
color : white;
padding : 2px;
width : 66%;
margin-left : 76px;
}
.form-pagebreak {
display : none;
}
li#id_109 {
margin-top : -40px;
margin-bottom: 160px;
}
li#id_80, #id_86, #id_112, #id_114{
margin-top : -40px;
}
li#id_135 {
margin-top : -32px;
}
div#text_169:hover {
background : #B09240;
color : white;
}
div#text_162:hover {
background : #B09240;
color : white;
}
div#cid_171 {
text-align : center;
margin-top : -94px;
}
div#text_173 {
margin-top : -52px;
}
div#text_184 {
margin-top : -46px;
}
div#cid_175 {
margin-top : -49px;
}
li#id_176 {
margin-top : -40px;
}
li#id_177 {
margin-top : -40px;
}
li#id_178 {
margin-top : -37px;
}
li#id_179 {
margin-top : -34px;
}
li#id_180 {
margin-top : -34px;
}
li#id_181 {
margin-top : -34px;
}
li#id_182 {
margin-top : -34px;
}
li#id_183 {
margin-top : -34px;
}
div#text_192 {
margin-top : -67px;
}
div#text_193 {
margin-top : -70px;
}
div#text_194 {
margin-top : -73px;
}
label#label_101 {
font-weight : 600;
}
label#label_102 {
font-weight : 600;
}
label#label_103 {
font-weight : 600;
}
div#text_205 {
margin-bottom : -43px;
}
div#cid_101 {
margin-top : -17px;
}
div#text_206 {
margin-top : -30px;
}
div#cid_102 {
margin-top : -62px;
}
div#text_207 {
margin-top : -33px;
margin-bottom : 20px;
}
div#cid_103 {
margin-top : -66px;
}
li#id_224 {
margin-top : -40px;
}
li#id_222 {
margin-top : -40px;
}
li#id_223 {
margin-top : -40px;
}
div#cid_225 {
margin-top : -46px;
}
label#label_101 {
display : none;
}
label#label_102 {
display : none;
}
label#label_103 {
display : none;
}
div#text_219 {
margin-top : 7px;
font-size : medium;
}
div#text_211 {
margin-top : -65px;
font-size : medium;
}
li#id_237 {
margin-top : -29px;
}
li#id_240 {
margin-top : -72px;
}
li#id_241 {
margin-top : -75px;
}
.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper {
border : none;
}
div#cid_130 {
margin-top : -55px;
}
#id_101 .qq-upload-button {
height : 234px;
}
#id_102 .qq-upload-button {
height : 234px;
}
#id_103 .qq-upload-button {
height : 234px;
}
button#input_226 {
margin-top : -62px;
margin-left : 135px;
}
div#text_229 {
margin-top : -30px;
}
div#text_231 {
margin-top : -30px;
font-size : medium;
}
button#input_230 {
margin-top : -65px;
margin-left : 135px;
}
button#input_232 {
margin-top : -65px;
margin-left : 135px;
}
.form-header-group {
width : unset;
margin : 0;
}
div.form-header-group.header-large, div.form-header-group.hasImage {
margin : 23px -38px 38px -39px;
}
#id_211 a {
background : black;
padding : 15px 59px;
}
#id_211 a:hover {
color: white;
background: #B09240;
}
#id_250 a {
background : black;
padding : 15px 59px;
}
#id_250 a:hover {
color: white;
background: #B09240;
}
#id_252 a {
background : black;
padding : 15px 59px;
}
#id_252 a:hover {
color: white;
background: #B09240;
}
div#text_248 {
margin-top : -75px;
}
div#text_250 {
margin-top: -65px;
}
div#text_252 {
margin-top: -67px;
}
li#id_270 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_271 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_272 {
margin-top: -175px;
margin-bottom: 45px;
}
li#id_273 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_274 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_275 {
margin-top: -22px;
margin-bottom: 45px;
}
li#cid_100 {
margin-bottom: -59px;
}
li#id_263 {
margin-top: -29px;
}
li#id_256 {
margin-top: -23px;
}
li#id_257 {
margin-top: -23px;
}
li#id_276 {
margin-top: -40px;
margin-bottom: -3px;
}
div#cid_288 {
margin-top: -40px;
margin-bottom: -15px;
}
div#text_278 {
margin-top: -40px;
margin-bottom: -46px;
}
div#cid_279 {
margin-bottom: -38px;
}
div#cid_344 {
margin-bottom: -38px;
}
div#cid_336 {
margin-bottom: -38px;
}
li#id_291 {
margin-bottom: -38px;
}
div#cid_300 {
margin-bottom: -38px;
}
li#id_289 {
margin-top: -11px;
}
li#id_290 {
margin-top: -23px;
}
li#id_299 {
margin-top: -23px;
}
li#id_326 {
margin-top: -23px;
}
li#id_335 {
margin-top: -23px;
}
li#id_343 {
margin-top: -23px;
}
button#input_scl_245 {
line-height: 1px;
margin: 1px;
background: black;
border: black;
font-weight: 700;
}
button#input_scl_226 {
display: none;
}
button#input_scl_230 {
display: none;
}
button#input_scl_232 {
display: none;
}
button#input_scl_278{
display: none;
}
button#input_scl_298 {
display: none;
}
button#input_scl_306 {
display: none;
}
button#input_scl_277 {
display: none;
}
button#input_scl_287 {
display: none;
}
.form-all .form-submit-button {
color: #ffffff;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
}
button#input_308 {
display: none;
}
.form-textbox, .form-textarea {
border-color: #B09240;
}
button#input_319 {
display: none;
}
button#input_277 {
display: none;
}
a {
color: darkgoldenrod;
}
button#input_scl_319 {
display: none;
}
div#cid_327 {
margin-bottom: -38px;
}
div#cid_352 {
margin-top: -50px;
}
div#cid_353 {
margin-top: -50px;
}
div#cid_354 {
margin-top: -50px;
}
li#id_255 {
margin-top: -40px;
}
.form-all .form-submit-button.js-new-sacl-button, .form-all .form-submit-print {
min-width: 98px;
font-weight: 600;
}
.form-all .form-submit-button {
color: white;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
select#input_358 {
color: black;
border-color: #B09240;
height: 27px;
}
li#id_360 {
margin-top: -318px;
}
li#id_357 {
margin-top: -242px;
}
li#id_358 {
margin-top: -157px;
}
li#id_359 {
margin-top: -73px;
}
li#id_281 {
margin-top: -28px;
height: 27px;
}
input#input_281 {
height: 27px;
}
li#id_282 {
margin-top: -22px;
margin-top: -515px;
}
#input_282 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -28px;
}
input#input_282 {
height: 27px;
}
li#id_284 {
margin-top: -443px;
}
#input_284 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -28px;
}
input#input_284 {
height: 27px;
}
li#id_322 {
margin-top: -111px;
}
label#sublabel_input_280 {
position: absolute;
right: -145px;
top: 9px;
color: black;
font-weight: 700;
font-size: 15px;
}
label#label_280 {
font-weight: 700;
font-size: 15px;
}
label#label_357{
font-weight: 700;
font-size: 15px;
}
label#label_358{
font-weight: 700;
font-size: 15px;
}
label#label_359{
font-weight: 700;
font-size: 15px;
}
li#id_361 {
position: relative;
top: -177px;
left: 500px;
}
li#id_357 {
width: 250px;
margin-top: -649px;
}
}
li#id_358 {
width: 250px;
margin-top: -648px;
margin-left: -255px;
}
select#input_358 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 122px;
margin-top: -28px;
}
li#id_359 {
width: 250px;
margin-top: -584px;
}
input#lite_mode_359 {
margin-left: 123px;
margin-top: -26px;
}
input#lite_mode_359 {
height: 27px;
}
li#id_281 {
margin-top: -578px;
}
#input_281 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -28px;
}
.form-label.form-label-auto {
display: block;
float: none;
text-align: left;
width: 100%;
}
input#input_280 {
height: 27px;
position: relative;
top: -27px;
left: 122px;
}
div#cid_360 {
position: absolute;
top: 16px;
left:-6px;
}
input#input_280 {
width: 240px !important;
}
}
input#lite_mode_359 {
width: 128px;
}
li#id_360 {
position: relative;
top: -326px;
}
li#id_286 {
margin-top: -341px;
}
.hasFormUserAvatar .form-all {
position: relative;
top: 0px;
}
.form-all .form-submit-button:hover {
color: white;
background: #B09240;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
button#input_scl_245:hover{
color: white;
background: #B09240;
}
label#label_281 {
font-size: 15px !important;
font-weight: 700 !important;
}
label#label_282{
font-weight: 700 !important;
font-size: 15px !important;
}
label#label_284{
font-weight: 700 !important;
font-size: 15px !important;
}
label#sublabel_input_280 {
position: absolute;
top: 78px;
font-size: 15px;
color: black;
font-weight: 700;
left: 7px;
}
.form-dropdown{
font-size: 13px !important ;
}
[data-type="control_dropdown"] .form-dropdown {
width: 240px !important;
}
.form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), .form-line:not(.fixed-width) .signatur {
min-width: 104%;
max-width: 100%;
}
input#lite_mode_359 {
margin-left: 122px;
margin-top: -30px;
}
li#id_363 {
display: none;
}
.form-all {
border-radius: 3px;
box-shadow: unset;
}
li#id_322 {
margin-top: -147px;
}
ul#tabs-list {
margin-bottom: -17px;
}
select#input_357 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 122px;
margin-top: -28px;
}
li#id_357, li#id_358, li#id_359 {
width: 420px !important;
}
.form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), .form-line:not(.fixed-width) .signatur {
min-width: 60%;
max-width: 55%;
}
#cid_281 {
bottom: 15px;
position: relative;
}
#cid_359 > div.form-error-message {
z-index: 99;
position: relative;
}
#id_358 {
bottom: 493px;
right: 427px;
}
- In Form Builder, click on the blue Paint Roller Icon to open Form Designer.
- Go the Styles tab, and delete the whole code in the Inject Custom CSS field.
- Paste the above code there.
- Click on Save, and that'll be it.
Give it a try and reach out again if there's anything else we can help you with.
-
abdulmughees078Replied on May 23, 2023 at 6:29 AM
All set but can you please check the issue,,, i need company inline and deal price box width same with all.. Aslo i need all spacing are equal
-
abdulmughees078Replied on May 23, 2023 at 7:12 AM
can you please resolve to space like in paraghraph
-
Ryan JotForm SupportReplied on May 23, 2023 at 7:19 PM
Hello Abdul,
Thanks for getting back to us. I can't seem to adjust the Company fields on your form and in your Paragraph field as it affects all the fields below it. Please try to replace the injected CSS code in your form with the CSS code below:
li#id_41 {
top : 400px;
}
label#label_68 {
display : none;
}
label#label_67 {
display : none;
}
label#label_69 {
display : none;
}
label#label_66 {
display : none;
}
.form-header-group {
background-color : #b09240;
color : #ffffff!important;
}
#id_71 {
top : -56em;
}
table {
border-collapse : collapse;
}
#input_2 {
color : white;
}
.form-submit-button:not(.form-sacl-button) {
color : white;
background : #000000;
border-color : black;
font-weight : 600;
}
.form-line-column .form-label {
font-weight : 700;
}
div#text_161 {
background : black;
color : white;
padding : 2px;
width : 30%;
}
div#text_162 {
background : black;
color : white;
padding : 2px;
width : 66%;
margin-left : 76px;
}
.form-pagebreak {
display : none;
}
li#id_109 {
margin-top : -40px;
margin-bottom: 160px;
}
li#id_80, #id_86, #id_112, #id_114{
margin-top : -40px;
}
li#id_135 {
margin-top : -32px;
}
div#text_169:hover {
background : #B09240;
color : white;
}
div#text_162:hover {
background : #B09240;
color : white;
}
div#cid_171 {
text-align : center;
margin-top : -94px;
}
div#text_173 {
margin-top : -52px;
}
div#text_184 {
margin-top : -46px;
}
div#cid_175 {
margin-top : -49px;
}
li#id_176 {
margin-top : -40px;
}
li#id_177 {
margin-top : -40px;
}
li#id_178 {
margin-top : -37px;
}
li#id_179 {
margin-top : -34px;
}
li#id_180 {
margin-top : -34px;
}
li#id_181 {
margin-top : -34px;
}
li#id_182 {
margin-top : -34px;
}
li#id_183 {
margin-top : -34px;
}
div#text_192 {
margin-top : -67px;
}
div#text_193 {
margin-top : -70px;
}
div#text_194 {
margin-top : -73px;
}
label#label_101 {
font-weight : 600;
}
label#label_102 {
font-weight : 600;
}
label#label_103 {
font-weight : 600;
}
div#text_205 {
margin-bottom : -43px;
}
div#cid_101 {
margin-top : -17px;
}
div#text_206 {
margin-top : -30px;
}
div#cid_102 {
margin-top : -62px;
}
div#text_207 {
margin-top : -33px;
margin-bottom : 20px;
}
div#cid_103 {
margin-top : -66px;
}
li#id_224 {
margin-top : -40px;
}
li#id_222 {
margin-top : -40px;
}
li#id_223 {
margin-top : -40px;
}
div#cid_225 {
margin-top : -46px;
}
label#label_101 {
display : none;
}
label#label_102 {
display : none;
}
label#label_103 {
display : none;
}
div#text_219 {
margin-top : 7px;
font-size : medium;
}
div#text_211 {
margin-top : -65px;
font-size : medium;
}
li#id_237 {
margin-top : -29px;
}
li#id_240 {
margin-top : -72px;
}
li#id_241 {
margin-top : -75px;
}
.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper {
border : none;
}
div#cid_130 {
margin-top : -55px;
}
#id_101 .qq-upload-button {
height : 234px;
}
#id_102 .qq-upload-button {
height : 234px;
}
#id_103 .qq-upload-button {
height : 234px;
}
button#input_226 {
margin-top : -62px;
margin-left : 135px;
}
div#text_229 {
margin-top : -30px;
}
div#text_231 {
margin-top : -30px;
font-size : medium;
}
button#input_230 {
margin-top : -65px;
margin-left : 135px;
}
button#input_232 {
margin-top : -65px;
margin-left : 135px;
}
.form-header-group {
width : unset;
margin : 0;
}
div.form-header-group.header-large, div.form-header-group.hasImage {
margin : 23px -38px 38px -39px;
}
#id_211 a {
background : black;
padding : 15px 59px;
}
#id_211 a:hover {
color: white;
background: #B09240;
}
#id_250 a {
background : black;
padding : 15px 59px;
}
#id_250 a:hover {
color: white;
background: #B09240;
}
#id_252 a {
background : black;
padding : 15px 59px;
}
#id_252 a:hover {
color: white;
background: #B09240;
}
div#text_248 {
margin-top : -75px;
}
div#text_250 {
margin-top: -65px;
}
div#text_252 {
margin-top: -67px;
}
li#id_270 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_271 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_272 {
margin-top: -175px;
margin-bottom: 45px;
}
li#id_273 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_274 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_275 {
margin-top: -22px;
margin-bottom: 45px;
}
li#cid_100 {
margin-bottom: -59px;
}
li#id_263 {
margin-top: -29px;
}
li#id_256 {
margin-top: -23px;
}
li#id_257 {
margin-top: -23px;
}
li#id_276 {
margin-top: -40px;
margin-bottom: -3px;
}
div#cid_288 {
margin-top: -40px;
margin-bottom: -15px;
}
div#text_278 {
margin-top: -40px;
margin-bottom: -46px;
}
div#cid_279 {
margin-bottom: -38px;
}
div#cid_344 {
margin-bottom: -38px;
}
div#cid_336 {
margin-bottom: -38px;
}
li#id_291 {
margin-bottom: -38px;
}
div#cid_300 {
margin-bottom: -38px;
}
li#id_289 {
margin-top: -11px;
}
li#id_290 {
margin-top: -23px;
}
li#id_299 {
margin-top: -23px;
}
li#id_326 {
margin-top: -23px;
}
li#id_335 {
margin-top: -23px;
}
li#id_343 {
margin-top: -23px;
}
button#input_scl_245 {
line-height: 1px;
margin: 1px;
background: black;
border: black;
font-weight: 700;
}
button#input_scl_226 {
display: none;
}
button#input_scl_230 {
display: none;
}
button#input_scl_232 {
display: none;
}
button#input_scl_278{
display: none;
}
button#input_scl_298 {
display: none;
}
button#input_scl_306 {
display: none;
}
button#input_scl_277 {
display: none;
}
button#input_scl_287 {
display: none;
}
.form-all .form-submit-button {
color: #ffffff;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
}
button#input_308 {
display: none;
}
.form-textbox, .form-textarea {
border-color: #B09240;
}
button#input_319 {
display: none;
}
button#input_277 {
display: none;
}
a {
color: darkgoldenrod;
}
button#input_scl_319 {
display: none;
}
div#cid_327 {
margin-bottom: -38px;
}
div#cid_352 {
margin-top: -50px;
}
div#cid_353 {
margin-top: -50px;
}
div#cid_354 {
margin-top: -50px;
}
li#id_255 {
margin-top: -40px;
}
.form-all .form-submit-button.js-new-sacl-button, .form-all .form-submit-print {
min-width: 98px;
font-weight: 600;
}
.form-all .form-submit-button {
color: white;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
select#input_358 {
color: black;
border-color: #B09240;
height: 27px;
}
li#id_360 {
margin-top: -318px;
}
li#id_357 {
margin-top: -242px;
}
li#id_358 {
margin-top: -141px;
}
li#id_359 {
margin-top: -73px;
}
li#id_281 {
margin-top: -28px;
height: 27px;
}
input#input_281 {
height: 27px;
}
li#id_282 {
margin-top: -22px;
margin-top: -490px;
}
#input_282 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -37px;
}
input#input_282 {
height: 27px;
}
li#id_284 {
margin-top: -423px;
}
#input_284 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -37px;
}
input#input_284 {
height: 27px;
}
li#id_322 {
margin-top: -111px;
}
label#sublabel_input_280 {
position: absolute;
right: -145px;
top: 9px;
color: black;
font-weight: 700;
font-size: 15px;
}
label#label_280 {
font-weight: 700;
font-size: 15px;
}
label#label_357{
font-weight: 700;
font-size: 15px;
}
label#label_358{
font-weight: 700;
font-size: 15px;
}
label#label_359{
font-weight: 700;
font-size: 15px;
}
li#id_361 {
position: relative;
top: -177px;
left: 500px;
}
li#id_357 {
width: 250px;
margin-top: -639px;
}
}
li#id_358 {
width: 250px;
margin-top: -648px;
margin-left: -255px;
}
select#input_358 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 122px;
margin-top: -28px;
}
li#id_359 {
width: 250px;
margin-top: -572px;
}
input#lite_mode_359 {
margin-left: 123px;
margin-top: -26px;
}
input#lite_mode_359 {
height: 27px;
}
li#id_281 {
margin-top: -562px;
}
#input_281 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 120px;
margin-top: -20px;
}
.form-label.form-label-auto {
display: block;
float: none;
text-align: left;
width: 100%;
}
input#input_280 {
height: 27px;
position: relative;
top: -27px;
left: 122px;
}
div#cid_360 {
position: absolute;
top: 16px;
left:-6px;
}
input#input_280 {
width: 240px !important;
}
}
input#lite_mode_359 {
width: 128px;
}
li#id_360 {
position: relative;
top: -315px;
}
li#id_286 {
margin-top: -341px;
}
.hasFormUserAvatar .form-all {
position: relative;
top: 0px;
}
.form-all .form-submit-button:hover {
color: white;
background: #B09240;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
button#input_scl_245:hover{
color: white;
background: #B09240;
}
label#label_281 {
font-size: 15px !important;
font-weight: 700 !important;
}
label#label_282{
font-weight: 700 !important;
font-size: 15px !important;
}
label#label_284{
font-weight: 700 !important;
font-size: 15px !important;
}
label#sublabel_input_280 {
position: absolute;
top: 78px;
font-size: 15px;
color: black;
font-weight: 700;
left: 7px;
}
.form-dropdown{
font-size: 13px !important ;
}
[data-type="control_dropdown"] .form-dropdown {
width: 240px !important;
}
.form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), .form-line:not(.fixed-width) .signatur {
min-width: 104%;
max-width: 100%;
}
input#lite_mode_359 {
margin-left: 122px;
margin-top: -30px;
}
li#id_363 {
display: none;
}
.form-all {
border-radius: 3px;
box-shadow: unset;
}
li#id_322 {
margin-top: -147px;
}
ul#tabs-list {
margin-bottom: -17px;
}
select#input_357 {
color: black;
border-color: #B09240;
height: 27px;
margin-left: 122px;
margin-top: -28px;
}
li#id_357, li#id_358, li#id_359 {
width: 420px !important;
}
.form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), .form-line:not(.fixed-width) .signatur {
min-width: 60%;
max-width: 55%;
}
#cid_281 {
bottom: 15px;
position: relative;
}
#cid_359 > div.form-error-message {
z-index: 99;
position: relative;
}
#id_358 {
bottom: 493px;
right: 427px;
}
iframe[data-client-id="53831901bbbeaf3d0300000e"] {
max-width: none !important;
margin-left: 58px !important;
width: 240px !important;
}
Give it a try and let us know how it goes.
-
abdulmughees078Replied on May 24, 2023 at 12:55 AM
hi team please reply me and resolve my issue?
-
Ryan JotForm SupportReplied on May 24, 2023 at 1:08 AM
Hello Abdul,
Thanks for getting back to us. Can you try to replace the injected CSS with my suggested CSS code above?
Give it a try and let us know how it goes.
-
abdulmughees078Replied on May 24, 2023 at 2:34 AM
yes I did but after that the spacing issue I am facing
-
abdulmughees078Replied on May 24, 2023 at 2:37 AM
After replaced with your code
-
Nora JotForm SupportReplied on May 24, 2023 at 3:10 AM
Hi Abdul,
We're sorry you're having difficulties getting your form to look how you want. You can add the following CSS code to your form to align the Company field with its counterpart inside the Paragraph element:
#text_361 > p:nth-child(2) {
margin-top: -7px !important;
}
-
abdulmughees078Replied on May 24, 2023 at 8:09 AM
I am still facing an issue also this is not my form i thing you made a mistake please let me know how i can manage the spacing
-
Nora JotForm SupportReplied on May 24, 2023 at 8:45 AM
Hi Abdul,
I apologize for the confusion. It seems I mistakenly sent a wrong screencast. The related screencast is here, and the code seems to be working well on the form as the fields are aligned.
Can you please post another screenshot to clarify what doesn't work as expected on your form? You can also check out my cloned version your form here.
After we hear back from you, we'll be able to help you with this.
-
abdulmughees078Replied on May 24, 2023 at 9:19 AM
This issue is in when you hit the submit button without fill any details you can see the verticle gap is to bad
-
Richie JotForm SupportReplied on May 24, 2023 at 4:04 PM
Hi Abdul,
Thanks for the additional details. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.
-
Richie JotForm SupportReplied on May 24, 2023 at 4:31 PM
Hi Abdul,
You can add this CSS code to correctly align the error messages:
#cid_360>.form-error-message{
position: absolute;
margin-top: -20px;
margin-left: 10px;
}
#cid_280>.form-error-message{
margin-top: -31px;
position: absolute;
}
#cid_359>.form-error-message{
position: absolute;
margin-top: -10px;
}
#cid_281>.form-error-message{
position: absolute;
margin-top: -10px;
}
#cid_357>.form-error-message{
position: absolute;
margin-top: -10px;
}
#cid_358>.form-error-message{
position: absolute;
margin-top: -10px;
}
#cid_282>.form-error-message{
position: absolute;
margin-top: -10px;
}
#cid_284>.form-error-message{
position: absolute;
margin-top: -10px;
}
li#id_357,li#id_358 {
width: auto;
}
li#id_281 {
height: 40px;
}
Checkout the screenshot below to see my result:
Give it a try and let us know how it goes.
-
abdulmughees078Replied on May 24, 2023 at 11:10 PM
Much batter thanks
-
Ryan JotForm SupportReplied on May 24, 2023 at 11:17 PM
Hello Abdul,
Thanks for getting back to us. I checked your form and it seems you have not yet added the suggested CSS code by my colleague Richie. Can you try it and see how it goes?
Reach out again if you have any other questions.
-
abdulmughees078Replied on May 25, 2023 at 12:09 AM
OK now the issue is in mobile and tablet responsive can you please check and resolve the issue
-
Ryan JotForm SupportReplied on May 25, 2023 at 1:07 AM
Hello Abdul,
Thanks for getting back to us. To resolve the mobile responsive issues, please inject the CSS code in your form below :
@media only screen and (max-width: 320px) {
div#cid_360 {
top: 10px !important;
left:74px !important;
}
li#id_360 {
top: -340px !important;
}
select#input_357 {
margin-left: 123px !important;
margin-top: -39px !important;
}
li#id_357 {
margin-top: -661px !important;
}
input#lite_mode_359 {
margin-left: 122px !important;
margin-top: -41px !important;
}
li#id_281 {
margin-top: -559px !important;
}
}
@media only screen and (min-width: 767px) and (max-width: 768px) {
div#cid_360 {
top: 10px !important;
left:41px !important;
}
li#id_360 {
top: -340px !important;
}
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
div#cid_360 {
top: 10px !important;
left:-5px !important;
}
li#id_360 {
top: -317 !important;
}
li#id_357 {
margin-top: -640px !important;
}
select#input_357 {
margin-top: -41px !important;
}
input#lite_mode_359 {
margin-top: -41px !important;
}
input#input_281 {
width: 240px !important;
}
input#input_282 {
width: 240px !important;
}
input#input_284 {
width: 240px !important;
}
}
Give it a try and let us know how it goes.
-
abdulmughees078Replied on May 25, 2023 at 10:57 AM
There is still an issue and also main product field missing
and due to mobile responsive other thigs are distroyed
-
Ryan JotForm SupportReplied on May 25, 2023 at 8:28 PM
Hello Abdul,
Thanks for getting back to us. Can you also include the dimensions of different layouts in your screenshot? Check out the screenshot below:
Once we hear back from you, we'll be able to move forward with a solution. -
abdulmughees078Replied on May 25, 2023 at 11:17 PM
I just use these tabs
320
375
425
768
1024
1440
please set all form issues for these mobiles tabs screen
-
Ryan JotForm SupportReplied on May 25, 2023 at 11:48 PM
Hello Abdul,
Thanks for getting back to us. To resolve the missing Main Product field, please replace my suggested CSS code above with the CSS code below:
@media only screen and (max-width: 320px) {
div#cid_360 {
top: 10px !important;
left:74px !important;
}
li#id_360 {
top: -340px !important;
}
select#input_357 {
margin-left: 123px !important;
margin-top: -39px !important;
}
li#id_357 {
margin-top: -661px !important;
}
input#lite_mode_359 {
margin-left: 122px !important;
margin-top: -41px !important;
}
li#id_281 {
margin-top: -559px !important;
}
li#id_358 {
right: 0px !important;
top: -144px !important;
}
select#input_358 {
margin-top: -41px !important;
width: 170px !important;
}
}
@media only screen and (min-width: 767px) and (max-width: 768px) {
div#cid_360 {
top: 10px !important;
left:41px !important;
}
li#id_360 {
top: -340px !important;
}
li#id_358 {
right: 0px !important;
}
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
div#cid_360 {
top: 10px !important;
left:-5px !important;
}
li#id_360 {
top: -317 !important;
}
li#id_357 {
margin-top: -640px !important;
}
input#input_281 {
width: 240px !important;
}
input#input_282 {
width: 240px !important;
}
input#input_284 {
width: 240px !important;
}
li#id_358 {
right: 0px !important;
}
select#input_358 {
margin-top: -42px !important;
}
}
As for the other layout issue, you might want to test them out on a device so that we could verify that it is not responsive on that specific device. You can do that by selecting a device in Dimension Responsive. Check out the screenshot below:
Reach out again if you have any other questions. -
abdulmughees078Replied on May 26, 2023 at 3:40 AM
Now facing a scroll issue on eeach device
-
Clara JotForm SupportReplied on May 26, 2023 at 3:47 AM
Hi Abdul,
Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.
In the meantime, let us know if you need any other help.
-
abdulmughees078Replied on May 27, 2023 at 8:34 AM
hi team i'm waiting for your reply
-
Billy JotForm SupportReplied on May 28, 2023 at 12:44 AM
Hi Abdul,
Thanks for patiently waiting. Please inject the CSS code below into the form:
@media only screen and (max-width: 480px) {
#input_280, #input_357, .form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), #input_281, #input_282, #input_284, #input_358 {
width: 155px !important;
}
#id_286 {
margin-top: -290px !important;
}
#id_322 {
margin-top: 60px !important;
}
button.form-page-break-back, button.form-page-break-next {
min-width: 80px !important;
}
div[data-widget-name="Masked Input"] {
overflow: hidden !important;
}
}
Also, please inject the CSS code below into the Masked Input widget (Deal Price). Here are the steps:
- Open the form in Form Builder
- Click on the Masked Input widget and then on its gear icon
- Click on the Custom CSS tab
- In the CSS editor, insert/paste the code below and click on Update Widget
@media only screen and (max-width: 480px) {
#maskedInput {
width: 155px !important;
}
}
After you've done all that, here's the result:
As you've noticed, I also made a few changes to the Paragraph widget and the buttons.
Reach out again if you need any other help.
-
abdulmughees078Replied on May 28, 2023 at 8:28 AM
can you please send me the form link so i can clone easily? all the things mixed up i want to see things in fresh form
-
abdulmughees078Replied on May 28, 2023 at 8:35 AM
On my iphone 14pro max screen the issues are happening
-
abdulmughees078Replied on May 30, 2023 at 4:12 AM
hi
-
Olivia JotForm SupportReplied on May 31, 2023 at 12:43 PM
Hi Abdul,
I'm sorry for the delay and I can see that this is very stressful. But we’ll need a bit of time to work out a solution. We’ll get back to you as soon as possible.
Thanks for your patience, we appreciate it.
-
abdulmughees078Replied on June 1, 2023 at 4:22 AM
ok i'm waiting
-
William JotForm SupportReplied on June 2, 2023 at 11:54 AM
Hi Abdul,
Thanks for patiently waiting. I was trying to work on some major changes on that part of the field, particularly adding separators in between fields and did some fixes on the CSS code that is currently in your form.
Can you tell us if this test form works for you: https://form.jotform.com/231515219311950
If yes, here are the steps that I did:
1. In the form builder, I have added a divider in between fields. This helps in preventing the wrapping or floating of the elements next to each other when aligning the fields. Here is gif image with the fields highlighted:
2. Next, I hope you haven't made some changes in your CSS code because I have made some cleanup on this by removing some redundant codes and merging some others but only for the fields on this page we are working on in particular. So you can replace your existing code with this:
li#id_41 {
top : 400px;
}
label#label_68 {
display : none;
}
label#label_67 {date
display : none;
}
label#label_69 {
display : none;
}
label#label_66 {
display : none;
}
.form-header-group {
background-color : #b09240;
color : #ffffff!important;
}
#id_71 {
top : -56em;
}
table {
border-collapse : collapse;
}
#input_2 {
color : white;
}
.form-submit-button:not(.form-sacl-button) {
color : white;
background : #000000;
border-color : black;
font-weight : 600;
}
.form-line-column .form-label {
font-weight : 700;
}
div#text_161 {
background : black;
color : white;
padding : 2px;
width : 30%;
}
div#text_162 {
background : black;
color : white;
padding : 2px;
width : 66%;
margin-left : 76px;
}
.form-pagebreak {
display : none;
}
li#id_109 {
margin-top : -40px;
margin-bottom: 160px;
}
li#id_80, #id_86, #id_112, #id_114{
margin-top : -40px;
}
li#id_135 {
margin-top : -32px;
}
div#text_169:hover {
background : #B09240;
color : white;
}
div#text_162:hover {
background : #B09240;
color : white;
}
div#cid_171 {
text-align : center;
margin-top : -94px;
}
div#text_173 {
margin-top : -52px;
}
div#text_184 {
margin-top : -46px;
}
div#cid_175 {
margin-top : -49px;
}
li#id_176 {
margin-top : -40px;
}
li#id_177 {
margin-top : -40px;
}
li#id_178 {
margin-top : -37px;
}
li#id_179 {
margin-top : -34px;
}
li#id_180 {
margin-top : -34px;
}
li#id_181 {
margin-top : -34px;
}
li#id_182 {
margin-top : -34px;
}
li#id_183 {
margin-top : -34px;
}
div#text_192 {
margin-top : -67px;
}
div#text_193 {
margin-top : -70px;
}
div#text_194 {
margin-top : -73px;
}
label#label_101 {
font-weight : 600;
}
label#label_102 {
font-weight : 600;
}
label#label_103 {
font-weight : 600;
}
div#text_205 {
margin-bottom : -43px;
}
div#cid_101 {
margin-top : -17px;
}
div#text_206 {
margin-top : -30px;
}
div#cid_102 {
margin-top : -62px;
}
div#text_207 {
margin-top : -33px;
margin-bottom : 20px;
}
div#cid_103 {
margin-top : -66px;
}
li#id_224 {
margin-top : -40px;
}
li#id_222 {
margin-top : -40px;
}
li#id_223 {
margin-top : -40px;
}
div#cid_225 {
margin-top : -46px;
}
label#label_101 {
display : none;
}
label#label_102 {
display : none;
}
label#label_103 {
display : none;
}
div#text_219 {
margin-top : 7px;
font-size : medium;
}
div#text_211 {
margin-top : -65px;
font-size : medium;
}
li#id_237 {
margin-top : -29px;
}
li#id_240 {
margin-top : -72px;
}
li#id_241 {
margin-top : -75px;
}
.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper {
border : none;
}
div#cid_130 {
margin-top : -55px;
}
#id_101 .qq-upload-button {
height : 234px;
}
#id_102 .qq-upload-button {
height : 234px;
}
#id_103 .qq-upload-button {
height : 234px;
}
button#input_226 {
margin-top : -62px;
margin-left : 135px;
}
div#text_229 {
margin-top : -30px;
}
div#text_231 {
margin-top : -30px;
font-size : medium;
}
button#input_230 {
margin-top : -65px;
margin-left : 135px;
}
button#input_232 {
margin-top : -65px;
margin-left : 135px;
}
.form-header-group {
width : unset;
margin : 0;
}
div.form-header-group.header-large, div.form-header-group.hasImage {
margin : 23px -38px 38px -39px;
}
#id_211 a {
background : black;
padding : 15px 59px;
}
#id_211 a:hover {
color: white;
background: #B09240;
}
#id_250 a {
background : black;
padding : 15px 59px;
}
#id_250 a:hover {
color: white;
background: #B09240;
}
#id_252 a {
background : black;
padding : 15px 59px;
}
#id_252 a:hover {
color: white;
background: #B09240;
}
div#text_248 {
margin-top : -75px;
}
div#text_250 {
margin-top: -65px;
}
div#text_252 {
margin-top: -67px;
}
li#id_270 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_271 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_272 {
margin-top: -175px;
margin-bottom: 45px;
}
li#id_273 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_274 {
margin-top: -22px;
margin-bottom: 45px;
}
li#id_275 {
margin-top: -22px;
margin-bottom: 45px;
}
li#cid_100 {
margin-bottom: -59px;
}
li#id_263 {
margin-top: -29px;
}
li#id_256 {
margin-top: -23px;
}
li#id_257 {
margin-top: -23px;
}
li#id_276 {
margin-top: -40px;
margin-bottom: -3px;
}
div#cid_288 {
margin-top: -40px;
margin-bottom: -15px;
}
div#text_278 {
margin-top: -40px;
margin-bottom: -46px;
}
div#cid_279 {
margin-bottom: -38px;
}
div#cid_344 {
margin-bottom: -38px;
}
div#cid_336 {
margin-bottom: -38px;
}
li#id_291 {
margin-bottom: -38px;
}
div#cid_300 {
margin-bottom: -38px;
}
li#id_289 {
margin-top: -11px;
display: block;
}
li#id_290 {
margin-top: -23px;
}
li#id_299 {
margin-top: -23px;
}
li#id_326 {
margin-top: -23px;
}
li#id_335 {
margin-top: -23px;
}
li#id_343 {
margin-top: -23px;
}
button#input_scl_245 {
line-height: 1px;
margin: 1px;
background: black;
border: black;
font-weight: 700;
}
button#input_scl_226 {
display: none;
}
button#input_scl_230 {
display: none;
}
button#input_scl_232 {
display: none;
}
button#input_scl_278{
display: none;
}
button#input_scl_298 {
display: none;
}
button#input_scl_306 {
display: none;
}
button#input_scl_277 {
display: none;
}
button#input_scl_287 {
display: none;
}
.form-all .form-submit-button {
color: #ffffff;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
}
button#input_308 {
display: none;
}
.form-textbox, .form-textarea {
border-color: #B09240;
}
button#input_319 {
display: none;
}
button#input_277 {
display: none;
}
a {
color: darkgoldenrod;
}
button#input_scl_319 {
display: none;
}
div#cid_327 {
margin-bottom: -38px;
}
div#cid_352 {
margin-top: -50px;
}
div#cid_353 {
margin-top: -50px;
}
div#cid_354 {
margin-top: -50px;
}
li#id_255 {
margin-top: -40px;
}
.form-all .form-submit-button.js-new-sacl-button, .form-all .form-submit-print {
min-width: 98px;
font-weight: 600;
}
.form-all .form-submit-button {
color: white;
background: black;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
li#id_322 {
margin-top: -111px;
}
li#id_361 {
position: relative;
top: -177px;
left: 500px;
}
.form-label.form-label-auto {
display: block;
float: none;
text-align: left;
width: 100%;
}
li#id_286 {
margin-top: -341px;
}
.hasFormUserAvatar .form-all {
position: relative;
top: 0px;
}
.form-all .form-submit-button:hover {
color: white;
background: #B09240;
box-shadow: none;
text-shadow: none;
border: black;
height: 50px;
font-size: medium;
}
button#input_scl_245:hover{
color: white;
background: #B09240;
}
.form-dropdown{
font-size: 13px !important ;
}
[data-type="control_dropdown"] .form-dropdown {
width: 240px !important;
}
.form-line:not(.fixed-width) .form-textbox:not(.time-dropdown):not(#productSearch-input), .form-line:not(.fixed-width) .signatur {
min-width: 104%;
max-width: 100%;
}
li#id_363 {
display: none;
}
.form-all {
border-radius: 3px;
box-shadow: unset;
}
li#id_322 {
margin-top: -147px;
}
ul#tabs-list {
margin-bottom: -17px;
}
@media only screen and (max-width: 480px) {
div#cid_280, div#cid_357, div#cid_358, div#cid_359, div#cid_360, div#cid_281, div#cid_282, div#cid_284 {
min-width: 180px !important;
width: 180px; !important;
max-width: 180px !important;
float: left !important;
padding-top: 5px;
margin: 0;
}
div#cid_360 {
margin-left: 9px !important;
}
/* image */
#id_361 {
position: relative !important;
left: 0px !important;
top: 940px !important;
visibility: hidden;
}
#id_280, li#id_360, #id_357, #id_358, #id_359, #id_281, #id_282, #id_284 {
width: 360px !important;
min-width: 360px !important;
list-style: none !important;
display: inline-block !important;
float: left;
}
li#id_360 {
margin-top: -650px !important;
}
#input_280, #input_357, #input_358, #lite_mode_359, #input_281, #input_282, #input_284 {
height: 27px !important;
width: 180px !important;
max-width: 180px !important;
}
#label_280, #label_357, #label_358,#label_359, label#label_360, #label_281, #label_282, #label_284 {
width: 130px !important;
display: inline-block;
float: left;
font-weight: 600;
}
button.form-page-break-back, button.form-page-break-next {
min-width: 80px !important;
}
div[data-widget-name="Masked Input"] {
overflow: hidden !important;
}
}
/* ======= end of mobile ========= */
#id_280, #id_360, #id_357, #id_358, #id_359, #id_281, #id_282, #id_284 {
width: 450px;
list-style: none !important;
display: inline-block !important;
float: left;
}
#input_280, #id_360, #input_357, #input_358, #lite_mode_359, #input_281, #input_282, #input_284 {
height: 27px !important;
width: 240px !important;
}
/*#id_360, #id_357, #id_358, #id_359, #id_281, #id_282, #id_284 {
margin-top: -590px !important
}*/
#id_280 {
margin-top: 30px !important;
}
#id_360 {
margin-top: -670px !important;
}
#id_357 {
margin-top: -640px !important;
}
#id_358 {
margin-top: -600px !important;
}
#id_359 {
margin-top: -560px !important;
}
#id_281 {
margin-top: -530px !important;
}
#id_282 {
margin-top: -500px !important;
}
#id_284 {
margin-top: -460px !important;
}
/*right image*/
#id_361 {
position: relative;
margin-top: 125px;
margin-left: -450px;
}
#id_360 {
min-width: 450px !important;
max-width: 450px !important;
width: 450px !important;
}
#cid_280, #cid_357, #cid_358, #cid_359, #cid_360, #cid_281, #cid_282,#cid_284 {
min-width: 240px !important;
width: 240px; !important;
max-width: 240px !Important;
float: left;
padding-top: 5px;
}
#cid_360{
margin: 0 0 0-20px !important;
padding: 0 !important;
}
#label_280, #label_357, #label_358,#label_359,#label_360, #label_281, #label_282, #label_284 {
width: 130px;
display: inline-block;
float: left;
font-weight: 600;
}
#id_280, #id_360, #id_357, #id_358, #id_359, #id_281, #id_282, #id_284 {
padding-bottom: 0;
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
}
/* dividers */
#id_366, #id_374, #id_365, #id_371, #id_373, #id_364, #id_372 {
padding: 0 !important;
margin: 10px !important;
}
Just a note: In mobile view, I hid the image example that's sitting next to the fields since I noticed in the images you shared you seem to not need it. Also, there might be some difference in the ID's for the dividers I added in case you will add yours.
Give this a try and let us know if you need help.
-
abdulmughees078Replied on June 5, 2023 at 10:17 AM
i could not see this paragraph on phone
-
Bojan Support Team LeadReplied on June 5, 2023 at 2:28 PM
Hi Abdul,
Thank you for contacting Jotform support. I have checked the form, and I was able to see the paragraph. Would you like to hide it only on the mobile view? If you would like to hide this paragraph on all pages, please add the following CSS to your form:
@media only screen and (max-width: 600px) {
#id_286, #id_297, #id_305 {
display: none !important;
}
}
If you are referring to something else, please provide more information so we could help you further.
-
abdulmughees078Replied on June 5, 2023 at 8:10 PM
I want to show this paragraph on every screen.
-
Richie JotForm SupportReplied on June 5, 2023 at 8:57 PM
Hi Abdul,
Thanks for the added information. You can add this CSS code to your form to show the paragraph in mobile:
@media (max-width: 480px){
li#id_286{
padding-top: 513px;
}
li#id_361 {
position: relative;
top: 430px;
left: 0px;
}
}
Checkout the screenshot below to see my result:
Give it a try and let us know how it goes.
- Templates
- Integrations
- INTEGRATIONS
- See 100+ integrations
- FEATURED INTEGRATIONS
PayPal- Slack
- Google Sheets
- Mailchimp
- Zoom
- Dropbox
- Google Calendar
- Hubspot
- Salesforce
- See more Integrations
- Products
- PRODUCTS
- Form Builder
- Jotform Enterprise
- Jotform Apps
- Store Builder
- Jotform Tables
- Jotform Inbox
- Jotform Mobile App
- Jotform Approvals
- Report Builder
- Smart PDF Forms
- PDF Editor
- Jotform Sign
- Jotform for Salesforce Discover Now
- Support
