Form width on Sidebar

  • Profile Image
    xagolab
    Asked on January 09, 2017 at 02:32 PM

    Hello,

    Just curious as to why doesn't form take on the full width of the sidebar just like my other form for newsletter?  I tried to tinker with Form Design, but it didn't inherit any changes and at times, messed up the form.

    I am attaching an example of what I mentioned above in a screenshot.

    Thanks

  • Profile Image
    jonathan
    Answered on January 09, 2017 at 04:51 PM

    It has to do with the responsive layout of the form. Please review the user guide below.

    User guide: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

     

    While in the Form Designer, make sure the option "Make this form responsive" is checked and saved the form design.

    Hope this help. Let us know how we can be of further assistance.

  • Profile Image
    xagolab
    Answered on January 09, 2017 at 08:20 PM

    I did have responsive form checked. It doesn't fill the sidebar like the other

  • Profile Image
    Charlie
    Answered on January 10, 2017 at 02:09 AM

    Could you please provide us the web page where the form is embedded? There are a couple of possible factors that may cause different results in the margin of the forms embedded. 

    We'll wait for your response.

  • Profile Image
    xagolab
    Answered on January 10, 2017 at 06:47 AM

    http://www.xagolab.com/_drive_ldr/

  • Profile Image
    seth
    Answered on January 10, 2017 at 07:33 AM

    Hello,

    I checked your form and you injected CSS code that anchors the form width:

    You can increase the width value to make the form fit to the side bar of your web site. I thik it si something around 350 pixels.

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

  • Profile Image
    xagolab
    Answered on January 10, 2017 at 07:36 AM

    So if I set it to 350px, it is fixed.  To make it dynamic, can I set it to AUTO or 100% something else so that it always takes on the full width of the sidebar?

  • Profile Image
    seth
    Answered on January 10, 2017 at 08:00 AM

    Hello,

    You can set the width to 100% and at the same time you can set max-width to 266px.

    Your side bar actually have 270 px width. So we have some borders so the form can be seen full on 266px width.

    Here is the code for this:

     

    .form-all {

    max-width: 266px !important;

    width: 100% !important;

    }

    If you want a wider form you can increase the maximum width value.

    Try this code and turn back to us with the results.

    Cheers.

     

     

  • Profile Image
    xagolab
    Answered on January 10, 2017 at 08:06 AM

    I have implemented your suggestion with no luck.  I even increased the width to 268px and at that width it chopped off again. 

    I guess I have to live with form in it's current state, huh?

  • Profile Image
    seth
    Answered on January 10, 2017 at 09:07 AM

    Hello again,

    Let's makes things clear:

    - Your side bar has a width of 270 px

    - The form below the JotForm has a width wider than the side bar. Hence, it is viewed as spilled over the margins. 

    The the divs with the name widget editor restrict the JotForm to be viewed wider. In order to achieve what you want, you need to change your styling related to these divisions:

    Unfortunately, JotForm has nothing to do with that styling.

    I hope I did help you. Please try to change your styling on your web page accordingly. An option is to decrease the second form's width to 89-90% from 100%:

    Cheers.

     

    PS: You can try styling options from the console. Here is a tutorial about it:

    https://stories.jotform.com/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3#.8y45m3cfu

  • Profile Image
    xagolab
    Answered on January 10, 2017 at 09:47 AM

    Thanks.  I have been contemplating on decreasing the Newsletter width for a while.  I was hoping for easy solution but at the same time I have to think about many other pages that will have sidebar and these forms.

    To keep things simpler, I think I will decrease the size of the Newsletter form.  I am hoping that other text stay well aligned in the sidebar otherwise I will be really juggling with aligning issue over and over on many pages to come.

    Thank you and everyone else very much and I will update everyone with any other issues I come across regarding aligning on sidebar.