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

    CSS to hide fields on "Address Map Locator" widget

    Asked by beatsahead on April 15, 2016 at 04:51 AM

    I'd appreciate help with the css I would need to use to hide latitude, longitude, province and country.

    I only want address to show under the map.

    The map doesn't show on a mobile device, is there a way around this?

    Page URL:
    https://eu.jotform.com//?formID=60606886504359

  • Profile Image
    JotForm Support

    Answered by mert on April 15, 2016 at 05:09 AM

    Hi there,

    You need to apply following CSS codes to the widget's "Custom CSS" tab.

    Please, see it from the below:

     

    Please, copy paste the following codes:

    #inputLat-row, #inputLng-row, #inputProvince-row, #inputCountry-row{

    display: none;

    }

     

    .table {

        top: -6px;

        position: absolute;

    }

     

    For further assistance, please do let us know.

    Regards.

  • Profile Image

    Answered by beatsahead on April 15, 2016 at 05:12 AM

    Than ks for your help, The map doesn't show on a mobile device, is there a way around this?

  • Profile Image
    JotForm Support

    Answered by mert on April 15, 2016 at 07:33 AM

    Alright, I see the problem now, I pushed the "Address" field above in order to monitor it on top; but it pushed the map above, so we need to remove the following CSS code. Then, everything will back to normal.

    Please, erase the following rule:

    .table {

        top: -6px;

        position: absolute;

    }

     

    Also, see the results from the below:

     

    If you need any other assistance, please do let us know.

    Regards.

  • Profile Image

    Answered by beatsahead on April 15, 2016 at 07:37 AM

    its still too big for mobile phones, i have it on a test form at https://eu.jotform.com//?formID=61051753056349

  • Profile Image
    JotForm Support

    Answered by mert on April 15, 2016 at 07:45 AM

    Hi there,

    To make it fit to the mobile devices' screens, you need to apply the following CSS rule. I noticed that before you asked and tried to find a solution for this. Now, this issue will be gone with the following code. However, you need to inject this code to the form's custom CSS section, not on the widget's tab.

     

    iframe{

    width: 100% !important;

    }

     

    After applying it, the results will look like the following (iPhone 5):

     

    Thanks.

  • Profile Image

    Answered by beatsahead on April 15, 2016 at 07:54 AM

    thanks, that's a great help.

    Is there a way to make the address label smaller on a phone?

    It's difficult to see the field where the address is entered.

  • Profile Image
    JotForm Support

    Answered by mert on April 15, 2016 at 09:47 AM

    Hi again,

    Yes, it is also possible. I write a CSS code that only work on mobile resolutions, so the appearance on the desktop is not going to change. Again, you need to copy the following code to the widget's "Custom CSS" tab:

     

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .label-section {

        text-align: left;

        padding-top: 0px !important;

        min-width: 60px;

    }

    .legacy-theme .input-section input, .legacy-theme .input-section .twitter-typeahead input{

        width: 100%;

    }

    .table-cell {

        padding: 7px !important;

    }

    }

     

     

    Also, you can see the results on mobile:

     

    Thanks.