-
chaofengAsked on October 6, 2015 at 2:51 PM
I just got another small issue with the header: when loading the form, the header will always be left-aligned to the left edge of the input field divs, rather than the edge of the whole page as I hoped. This might have something to do with the position setting "position: absolute" again, but I'm not really sure. Can you help me to take a look for this too?
http://form.jotform.ca/form/52776025061250?
Thanks as always!
Best,
Chao
-
BenReplied on October 6, 2015 at 3:09 PM
Looking at your form at this time Chao, I believe that that is how you want it to be:
Now if that is true, you should be able to simply add the following CSS to the form:
.form-header-group.hasImage > .header-text.httal.htvam {
width: 33%;
}- without adding any other - just add the one above to the current CSS code in your form.
It will look as on the image and remove the scroll bars.
If by some chance you meant something else, do let us know and we would be happy to check that out and help you with that as well :)
-
chaofengReplied on October 6, 2015 at 4:10 PM
Hi Ben,
Thanks for taking another look! And sorry I made it unclear, your fix worked great and I managed to get rid of the horizontal scroll bar.
What I meant was, when the form is loading, the left edge of the header would first be aligned to the left edge of the form input fields, that is, the logo image will be shown above the texts on the right side of the page in the grey area, while the heading "Digital Graffiti Wall" will be shifted to further right side next to the logo.
I'm wondering if there's something wrong with my custom CSS.
Thanks again for the help!
Best,
Chao
-
Mike_G JotForm SupportReplied on October 6, 2015 at 7:22 PM
When your form is loading the logo would first appear on the right edge of the form, like this
And when it is loaded completely,
I just like to confirm: Is this what you would like to happen?
If it is, you can achieve that by adding this code to you form
#cid_404{
position: relative !important;
left: 240px !important;
}
.header-logo{
background-color: #F3F5F9 !important;
}
Let us know if you need any further assistance and we will be glad to help you. Thank you.