CSS: A little help with modal sizing.

  • AgilityAssoc.Canada
    Asked on April 21, 2019 at 9:55 AM

    Hi,

    On my form 83354135430955, I have just introduced a Modal. When applicant clicks on "View Conditions" button, a window opens with the Conditions text. I'm attempting to make it reactive by using percent value of 65%. This works well for small screens but is a bit to large for larger screens. How can I limit the sizing for larger screens so that is no bigger then 45%?

    Thank you,
    Robert

  • Victoria_K
    Replied on April 21, 2019 at 11:06 AM

    Hello Robert, 

    Let me suggest to try setting max-width for 'open' id:

    CSS: A little help with modal sizing Screenshot 20

    By the way, there is a cool modal on your form. 

    Please let us know if max-width will not work good enough.

  • AgilityAssoc.Canada
    Replied on April 22, 2019 at 9:48 AM

    Hi,

    That helps considerably, using Chrome but still so well with Firefox and Edge very well. I did make some value changes to what was suggested. 

    Thank you,
    Robert

    1555940803FireFox vs Chrome Screenshot 101555940822Edge vs Chrome Screenshot 21

  • AgilityAssoc.Canada
    Replied on April 22, 2019 at 10:09 AM

    Hi again,

    I have set a min-width value also. My question is, dose the order of the element settings have an influence on how it responds;

    example, the 3 highlighted settings; if min was above max; would that change anything?;

    #open{

      position: fixed;

      border: 4px double teal;

      background-color:#fefefe !important;

      width: 45%;

      max-width: 35%;

      min-width: 30%;

      position: fixed;

      font-family: Calibri; 

      font-size: 11pt;

      text-align: justify;

      padding-right: 1.0em;

      padding-left: 0.6em;

      left: 20%;

      top:5%;

      overflow-y: scroll;

      z-index: 99999;

     -webkit-transition: opacity 1600ms ease-in;

     -moz-transition: opacity 1600ms ease-in;

      transition: opacity 1600ms ease-in;

    }

    Regards, Robert

  • BJoanna
    Replied on April 22, 2019 at 11:55 AM

    Based on my tests the order should not have an influence. I made several tests with a different order and the Modal was always the same. 

  • AgilityAssoc.Canada
    Replied on April 22, 2019 at 2:54 PM

    Hi,

    Thank you for doing your research. It is very helpful.

    I finally found settings that work well for all browsers for the width.

      width: 100%
      max-width: 33.333333vw ;
      min-width: 350px ;  

    Thank you for your guidance and kind comments,
    Robert