-
talenAsked on March 18, 2016 at 9:52 AM
-
CarinaReplied on March 18, 2016 at 11:19 AM
You can add the following css code:
#input_reset_2 {
position:relative;
bottom: -56px;
left: 250px;
}
You can adjust the left value. Or as an alternative you can clone the demo form:
https://form.jotform.com/60774436954971
Let us know if we can assist you further.
-
talenReplied on March 21, 2016 at 4:36 AM
Hi, now I1ve done that, but I can't seem to get them on line, I tried to get them closer to the SEND BESTILLLING-button ... and the Print-button will not be grey ...? and I can't get them entered :)
https://form.jotformeu.com/60761421462349
-
Nik_CReplied on March 21, 2016 at 6:44 AM
I used the clone of my colleagues form, so to adjust that what you need, please copy this CSS to your Custom CSS field:
#input_2 {
bottom: -10px;
}
Also, for making your print button grey, copy this CSS:
#input_print_2 {
background: grey;
}
Please let us know if this works for you and if it is what you had in mind.
Here is the link of my cloned form: https://form.jotform.com/60802390027953, feel free to clone it.
-
talenReplied on March 21, 2016 at 8:09 AM
hmm I can not get them on line, and another thing it seems the two column products don't fit to the responsive, mobile.
Could you have look and see where I've done wrong, do you get to see my css when I send you this link?
https://form.jotformeu.com/60761421462349
-
talenReplied on March 21, 2016 at 8:10 AM
and they do not center ...
-
beril JotForm UI DeveloperReplied on March 21, 2016 at 9:58 AM
Hi again,
To fix that issue can you add the CSS code below?
#input_print_2 {
width : 140px !important;
height : 40px !important;
background-color : lightgrey;
bottom : 46px !important;
position:relative;
}
At that time, your print and reset buttons will be at the same line.
You can also align center your print and reset buttons by adding the additional CSS code.
Here is your code:
#input_print_2 { margin-left : 180px !important;
}
#input_reset_2 { margin-left : 200px !important;
}
Here is how it works:
If it doesn't work, please let us know. We can try another solution.
-
beril JotForm UI DeveloperReplied on March 21, 2016 at 10:06 AM
it seems the two column products don't fit to the responsive, mobile.
I've checked your form on my phone which is IPhone 5s. I am not able to reproduce any issue.
Here is how it works on my phone:
Can you also send the screenshot of your form when you open it on your mobile phone?
-
talenReplied on March 21, 2016 at 11:31 AM
ok, I'll do that but the buttons in the bottom seems to just don't get right at all, maybe its to much done in the css, that makes it cloudy :)
#cid_1 img.form-product-image {
width : 150px !important;
}
#cid_1 img.form-product-image-with-options {
width : 170px !important;
}
#input_2 {
}
.span_print {
}
.form-buttons-wrapper {
}
#cid_1 img.form-product-image {
width : 150px !important;
}
#cid_1 img.form-product-image-with-options {
width : 150px !important;
}
/* Submit button*/
.form-submit-button {
width : 180px !important;
height : 40px !important;
}
/* Reset button */
.form-submit-reset {
width : 140px !important;
height : 40px !important;
margin-top : -30px;
}
/* Print button*/
.form-submit-print {
width : 140px !important;
height : 40px !important;
margin-top : -30px;
background-color : lightgrey;
}
#input_2 {
}
.span_print {
}
.form-buttons-wrapper {
}
.form-product-item {
line-height : 20px;
border : 2px solid #EFEFEF;
margin-left : 0px;
margin-right : 20px;
margin-bottom : 20px;
margin-top : 20px;
padding : 10px;
padding-right : 10px;
padding-left : 10px;
float : center;
width : 300px;
}
.form-product-item + br {
display : none;
}
br + b {
float : left;
padding-top : 0px;
}
.form-payment-total {
line-height : 40px;
margin : 0px;
border : 0px solid #EFEFEF;
border-radius : 4px;
padding : 15px;
padding-right : 0px;
padding-left : 0px;
margin-top : -10px;
margin-bottom : -10px;
}
.form-section.page-section {
}
.form-line.form-line-column.form-col-1 {
}
.form-all {
}
.jotform-form {
}
#id_1 {
}
#60761421462349 ul.form-section {
}
.form-input-wide.jf-required {
}
.form-label.form-label-left {
}
#label_5 {
}
#input_reset_2 {
position : relative;
bottom : -26px;
left : 160px;
background-color : lightgrey;
}
.form-line {
}
.form-input.jf-required {
}
#id_13 {
margin-top : -40px;
margin-bottom : -20px;
}
.form-html {
}
#id_15 {
margin-top : -40px;
margin-bottom : -20px;
}
.form-textbox.form-address-state {
}
.form-textbox.focus.inputmask {
}
-
CharlieReplied on March 21, 2016 at 12:02 PM
Most probably because it was missing the "!important".
I cleaned up your CSS code. Try replacing all your CSS code using this one:
#cid_1 img.form-product-image {
width : 150px !important;
}
#cid_1 img.form-product-image-with-options {
width : 170px !important;
}
#cid_1 img.form-product-image {
width : 150px !important;
}
#cid_1 img.form-product-image-with-options {
width : 150px !important;
}
/* Submit button*/
.form-submit-button {
width : 180px !important;
height : 40px !important;
}
/* Reset button */
.form-submit-reset {
width : 140px !important;
height : 40px !important;
position: relative !important;
bottom: -26px !important;
left: 160px !important;
margin-top : -30px !important;
}
/* Print button*/
.form-submit-print {
width : 140px !important;
height : 40px !important;
margin-top : -30px !important;
background-color : lightgrey;
}
.form-product-item {
line-height : 20px;
border : 2px solid #EFEFEF;
margin-left : 0px;
margin-right : 20px;
margin-bottom : 20px;
margin-top : 20px;
padding : 10px;
padding-right : 10px;
padding-left : 10px;
float : center;
width : 300px;
}
.form-product-item + br {
display : none;
}
br + b {
float : left;
padding-top : 0px;
}
.form-payment-total {
line-height : 40px;
margin : 0px;
border : 0px solid #EFEFEF;
border-radius : 4px;
padding : 15px;
padding-right : 0px;
padding-left : 0px;
margin-top : -10px;
margin-bottom : -10px;
}
#id_13 {
margin-top : -40px;
margin-bottom : -20px;
}
#id_15 {
margin-top : -40px;
margin-bottom : -20px;
}
This is how it looks like: https://form.jotform.com/60804392922961. Let us know if you need further adjustment on it.
-
talenReplied on March 22, 2016 at 4:06 AM
Thank you, this was nice :) the only problem now is that the form does not show. When I move the page to a smaller window in my desktop, the form disappear ...
-
Nik_CReplied on March 22, 2016 at 4:26 AM
On behalf of my colleagues, you're welcome!
I tried your form on multiple browsers and on mobile devices, and the form is showing normally. Which browser are you using?
And how do you mean "move the page to a smaller window in my desktop"?
Please let us know and we'll be glad to help you!
-
talenReplied on March 22, 2016 at 4:37 AM
when I open the order page in Safari and drag the window smaller / more narrow until the mobile menu shows, the order form disappear.
http://elisabethtalen.no/bestillingskjema.html
-
talenReplied on March 22, 2016 at 4:39 AM
I trie to refresh the page, but it does not help, the same happens if I trie the page on my iPad.
-
Nik_CReplied on March 22, 2016 at 4:57 AM
I see that you embedded using Adobe Muse. This problem with forms not showing on mobile devices is because of Adobe Muse's settings. Since, the form itself(outside of website) is loading normally on mobile devices.
So, please follow this guides to add supported resolutions for your form in Adobe Muse:
http://stephen.io/mediaqueries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
So if you predefined your resolution for your website in Muse, please include the smaller ones as well to cover mobile devices.
Please let me know if you have further questions.
-
talenReplied on March 22, 2016 at 5:46 AM
I have all the sizes in breakpoints in Muse for iPad and 320 px for mobile.
I've used this css in the jot form now, but can't see any effect ... did I do this wrong?
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){
}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px){
}
-
beril JotForm UI DeveloperReplied on March 22, 2016 at 6:11 AM
You need to add CSS style between curly braces.
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px){
.form-all {
width: 320px !important;
}
}
I've tested your website on my phone. I am able to reproduce the same issue that you're having. The form is not visible on Phone.
in addition to that, can you re-embed your form with Iframe method? At that time, it will work properly.
Please, check the guide below for more information:
http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
-
talenReplied on March 22, 2016 at 6:45 AM
Ah, thank you ever so much! the iFrame works, and now my client can start adding products :)