-
AgilityAssoc.CanadaAsked 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_KReplied on April 21, 2019 at 11:06 AM
Hello Robert,
Let me suggest to try setting max-width for 'open' id:
By the way, there is a cool modal on your form.
Please let us know if max-width will not work good enough.
-
AgilityAssoc.CanadaReplied 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 -
AgilityAssoc.CanadaReplied 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
-
BJoannaReplied 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.CanadaReplied 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