Floating fields

  • beatsahead
    Asked on November 19, 2017 at 1:18 PM

    I am working on a form on which I would like to have an html box fixed to the side. It needs more work on the look, but is in the correct place on a PC, however it overlays the form on a mobile.

    How can I get it to stay in the normal place on a phone.

  • Richie JotForm Support
    Replied on November 19, 2017 at 2:15 PM

    Hello,

    To be able to make your form responsive you need to media queries css,

    I cloned your form and edited the media queries css here is the final screenshot

    Floating fields Image 1 Screenshot 20

    Here is the css code:

    /*Smallest screen*/
    @media (max-width: 480px){

    #text_263 {
        position : fixed;
        right : 15px;
        bottom :380px;
        width : 180px!important;
    }
    }
    /* Tilted Smallest screen*/
    @media (min-width:481px) and (max-width:600px){
        #text_263 {
        position : fixed;
        right :10px;
        bottom :70px;
        width : 300px!important;
       
      
    }
    }

    /*medium screen*/
    @media (min-width: 601px) and (max-width:960px){
      #text_263 {
        position : fixed;
        right :150px;
        bottom :880px;
        width : 180px!important;
       
    }
    }

    /*Tilted medium screen*/
    @media (min-width: 961px) and (max-width:1290px){
       #text_263 {
        position : fixed;
        right :150px;
        bottom :500px;
        width : 180px!important;

    }
    }

    /*Desktop view*/
    @media (min-width:1291px){
        #text_263 {
        position : fixed;
        right :150px;
        bottom :300px;
        width : 180px!important;

    }
    }

    Feel free to edit the css,for more information on the media queries here is a guide:

    https://css-tricks.com/logic-in-media-queries/

    I hope this information helped you.

    Best Regards.

  • beatsahead
    Replied on November 19, 2017 at 3:41 PM

    the final screen shot you have above still has the table floating which I dont want.

  • Richie JotForm Support
    Replied on November 19, 2017 at 3:53 PM

    Hi,

    You can adjust the table with the media queries I have given to suit your needs.

    Here is the css code:

    /*Smallest screen*/
    @media (max-width: 480px){

    #text_263 {
        position : fixed;
        right : 15px;
        bottom :380px;
        width : 180px!important;
    }
    }
    /* Tilted Smallest screen*/
    @media (min-width:481px) and (max-width:600px){
        #text_263 {
        position : fixed;
        right :10px;
        bottom :70px;
        width : 300px!important;
       
      
    }
    }

    /*medium screen*/
    @media (min-width: 601px) and (max-width:960px){
      #text_263 {
        position : fixed;
        right :150px;
        bottom :880px;
        width : 180px!important;
       
    }
    }

    /*Tilted medium screen*/
    @media (min-width: 961px) and (max-width:1290px){
       #text_263 {
        position : fixed;
        right :150px;
        bottom :500px;
        width : 180px!important;

    }
    }

    /*Desktop view*/
    @media (min-width:1291px){
        #text_263 {
        position : fixed;
        right :150px;
        bottom :300px;
        width : 180px!important;

    }
    }

    Here is a screenshot on the cloned form.

    Floating fields Image 1 Screenshot 20


    Please let us know if we can be of further assistance.


    Best Regards.





  • beatsahead
    Replied on November 20, 2017 at 3:27 AM

    I'm sorry I'm not able to do what I want 

    What CSS do I use to stop it flooring and have it stay in a normal place on the form for mobile devices?

  • Richie JotForm Support
    Replied on November 20, 2017 at 8:36 AM

    Hello beatsahead,

    And I am very sorry if the information I have given did not helped you.

    Correct me if I am wrong, you dont want the table to be fixed with the scrolling but it to be fixed and stay at the top?

    If so, the css woulde be:

    position:absolute;

    Floating fields Image 1 Screenshot 20

    Here is the css code:


    @media (max-width: 480px){

    #text_263 {
        position : absolute;
        right : 1px;
        bottom :1900px;
        width : 180px!important;
       
    }
    }
    @media (min-width:481px) and (max-width:600px){
        #text_263 {
        position : absolute;
        right :20px;
        bottom :1550px;
        width : 300px!important;
       
      
    }
    }
    @media (min-width: 601px) and (max-width:960px){
      #text_263 {
        position : absolute;
        right :150px;
        bottom :1550px;
        width : 180px!important;
       
    }
    }
    @media (min-width: 961px) and (max-width:1290px){
       #text_263 {
        position : absolute;
        right :90px;
        bottom :1550px;
        width : 180px!important;

    }
    }
    @media (min-width:1291px){
        #text_263 {
        position : absolute;
        right :90px;
        bottom :1550px;
        width : 180px!important;

    }
    }

    Here is the form I have created feel free to clone it. https://form.jotform.com/73224831389966

    If you need further assistance,let us know.

    Best Regards.

  • beatsahead
    Replied on November 20, 2017 at 11:07 AM

    I wanted to have position :fixed on a pc, but not on a mobile as it covers the form.

  • Richie JotForm Support
    Replied on November 20, 2017 at 12:33 PM

    To enable the position to be fixed on a pc you must change your css: position:fixed;

    /*Desktop view*/
    @media (min-width:1291px){
        #text_263 {
        position : fixed;
        right :150px;
        bottom :300px;
        width : 180px!important;

    }
    }

    Floating fields Image 1 Screenshot 30


    then to make the table stay at the top in mobile view  position:absolute;

    Floating fields Image 2 Screenshot 41

    Here is the css code:



    @media (max-width: 480px){

    #text_263 {
        position : absolute;
        right : 1px;
        bottom :1900px;
        width : 180px!important;
       
    }
    }
    @media (min-width:481px) and (max-width:600px){
        #text_263 {
        position : absolute;
        right :20px;
        bottom :1550px;
        width : 300px!important;
       
      
    }
    }
    @media (min-width: 601px) and (max-width:960px){
      #text_263 {
        position : absolute;
        right :150px;
        bottom :1550px;
        width : 180px!important;
       
    }
    }
    @media (min-width: 961px) and (max-width:1290px){
       #text_263 {
        position : absolute;
        right :90px;
        bottom :1550px;
        width : 180px!important;

    }
    }


    Here is the form I have created feel free to clone it. https://form.jotform.com/73224831389966

    Best Regards.


  • beatsahead
    Replied on November 20, 2017 at 12:41 PM

    That's not it. I'm having trouble explaining. I want the floating field on a PC or large screen, but I don't need to see it at all on a smaller screen.

  • Richie JotForm Support
    Replied on November 20, 2017 at 1:20 PM

    I'm terribly sorry beatsahead for the misunderstanding.

    You just wanted to make the table hide when it is on mobile so that your form can be seen properly correct?

    45019 2 Screenshot 10

    To able to do that, just change position:fixed; then add margin-left:290px;

    @media (max-width: 480px){
     
    #text_263 {
        position : fixed;
       margin-left:290px;
        bottom :300px;
        width : 180px!important;
      
    }
    }

    You can adjust this numbers using the media queries depending on the screen.

    Here is the mobile queries css.

    /*For small devices*/

    @media (max-width: 480px){

    }

    /*side small devices*/
    @media (min-width:481px) and (max-width:600px){
     

    }

    /*medium devices*/
    @media (min-width: 601px) and (max-width:960px){
     
    }

    /*side medium devices*/
    @media (min-width: 961px) and (max-width:1290px){
     
    }

    /*Large Screen*/
    @media (min-width:1291px){

    }

    I hope this information helps you, again my apologies.

    Regards.