What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Vertical alignment and mobile responsiveness of Tab List Widget

    Asked by formvendor on February 28, 2015 at 12:41 PM
    (2) I have modified your tabs-list widget to make it vertical and responsive. I have it to the left of the "form-sections" of my multiple page employment application. Part of the styling in {issue #1} included my attempts to make it all render correctly including applying {width: 70% !important; left: 20% !important;} first to .form-section, then to ul.form-section and then to .form-line, .form-input-wide, .form-pagebreak etc. I had hoped that all of the div's would adhere to their width of their containers... but for some reason they aren't.
    vertical alignment Tab list widget Form Tabs
  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2015 at 12:45 PM

    Hi,

    Well, I saw the changes in the form and as far as I could see it, it's working. Here's a screenshot of how I saw it:

     

    Adding !important should override the default styling of the widget. The employment application section is not related to the widget and I'm looking if what I can do about it. I have cloned your form. Will get back to you.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2015 at 12:59 PM

    So, how's this form: http://www.jotformpro.com/form/50584677359975 ? This is my clone version. Kindly check.

    Thanks

  • Profile Image

    Answered by formvendor on February 28, 2015 at 02:23 PM

    Starting to take shape! At long last the elements are staying within their containers width! :)

    With that in place- these are the issues that remain (related only to this ticket):

    **There are other issues- text size, textbox size, etc. but i'll hold onto those for now**

    (1) While I understand that the tab menu isn't related to form-sections- for cross-browser/platform rendering - I think that it's horizontal positioning has to be relative to form-sections. Otherwise it breaks in both mobile and on a wider desktop. See below:

     

    On Mobile 

    On Wide Desktop


     

  • Profile Image

    Answered by formvendor on February 28, 2015 at 02:31 PM

    So I think they will have to be horizontally positioned relative to one another, or relative to the viewport. 

    But what I meant in my original question by vertically aligned is that I would like the tabs-menu and the form-section to align vertically at the top (e.g. spacing between .tabs-menu and % completion is identical to spacing between .form-section and % completion which is also identical to the language picker.

  • Profile Image

    Answered by Ben on February 28, 2015 at 06:47 PM

    I am not sure if I am correct, but it seems to me that you would like to have the tabs menu equally away from the progress bar as the form section is (header)?

    Looking at the jotform my colleague did, this seems to be so as it is - which is why I am not sure that I understood what you would like to achieve.

    It should be slightly adjusted either to the black line above or the blue rectangle under it, but it is almost aligned. Is that what you mean?

    If so to which do you want it to be aligned to? To be raised to align with the black line or to be lowered to align with the blue header?

    Once it is set up how it should look on the desktop we can help you set it up for other devices as well.

  • Profile Image

    Answered by formvendor on February 28, 2015 at 07:34 PM

    Hey Ben,

     

    Yes- it should line up with the black line, both in mobile and in desktop.

    But here is the challenge (for which there is a separate ticket) - The "APPLICANT INFO." heading is a FitText Widget, which for some reason isn't functioning right now. 

    So lining the tabs up perfectly with the non-functioning FitText element will be perfect- up until that widget is actually fixed. Then the text within it and subsequently it's container will expand/contract with the viewport.

    Not sure which comes first- "the chicken or the egg". Just let me know what you think we should do next.

    Thank you for taking the time to respond.