Avatar of ddantes
ddantes
Flag for United States of America asked on

Changing the style of a calendar popup

Our online reservation system requires visitors to use a popup calendar form to enter dates of their proposed reservation.  Someone recently complained that the calendar popups were too small, so I'm asking for Expert advice about how to enlarge them.  For clarification, I'm not asking for alternative reservation systems -- just for technical advice about enlarging the popups in our existing system.

I believe the calendar popup styling is controlled by the attached css file.  To reproduce the issue, please visit www.mauitradewinds.com/RezEasy/rezeasy.html  and select New Booking from the menu.   Please note that a different format is provided for tablet and mobile visitors, and nobody has complained about that.  However, for notebook visitors with a small screen, it may be an issue. calendar1.css

Kindly be aware that the centering of the calendar popups was a challenging issue for me.  In the past, the popups appeared too high, or entirely off the screen in some browsers or screen sizes.  Whatever adjustments may be made to the size of the popups, it will be important that they continue to appear close to the center of the screen, regardless of the browser or screen size.
CSSE-Commerce

Avatar of undefined
Last Comment
Prasadh Baapaat

8/22/2022 - Mon
Prasadh Baapaat

Hi ddantes,
since you are looking into the calendar popup size issue on smaller screens, I suggest you use media queries and have 3 different sizes for desktops, notebooks/tabs & small screen mobiles.

after checking the CSS... I observed that most content in the tables is TEXT and you have used font-size in only 2 classes at start of the CSS (2 more classes for the arrows and combo )

so I guess if you add a few lines of CSS with media queries, it will increase the TEXT font-size and in turn push the table size to accommodate them... in turn making the table a bit bigger and more readable.

can you add below lines after all code in css and check how it looks on a smaller width devices

@media (max-width: 768px) {
.calendar, .calendar table {
     font-size: 13px;
}
@media (max-width: 480px) {
.calendar, .calendar table {
     font-size: 15px;
}

Open in new window


let me know your views.
thanks,
Prasadh
Prasadh Baapaat

I did not read your post correctly and missed out that you have diff arrangement for mobile view....  a solution would be better if you target just the notebook size

@media only screen and (min-width:768px) and (max-width: 1024px)  {
.calendar, .calendar table {
     font-size: 13px;
}
}
ddantes

ASKER
Hello Prasadh:  Thank you for your comments.  I just asked the customer who complained about the calendar size, as to what device he was using.  He said it is a Windows Surface Pro 3 with a small screen.   Will the CSS code you provided help with that?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Prasadh Baapaat

well I did not know surface pro resolution or screen size so I checked on google and here is what I found:

Screen size:
12"
Resolution:
2160 x 1440

no wonder... if someone has 2160 x 1440 resolution on a 12 inch screen everything is gonna look small and our text of 11px is definitely going to look even smaller.

and my earlier code is not going to help your client.

but we cannot have diff css for every client...  what may help you is font sizes in em but let me think on it a bit more and I will get back to you soon.

thanks,
Prasadh
ddantes

ASKER
Very kind of you to take an interest.  I'll await your feedback.
ASKER CERTIFIED SOLUTION
Prasadh Baapaat

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Prasadh Baapaat

my above css suggestion is based on GUESSWORK... so it needs to be tested before we finalize the diff resolutions and text sizes.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ddantes

ASKER
Thank you for your research and styling proposal.  It's been implemented now.   Please let me know how it looks to you.  

I temporarily removed the media query which presents the mobile version to iPad visitors, so I could look at the calendar popup on my iPad.  I could not see any difference in the calendar popup size or font, whether or not the calendar stylesheet contained the code which you supplied.  I was expecting to see larger font/popup on the iPad with the new CSS code.  Maybe I am overlooking something.
Prasadh Baapaat

I checked and I did not find any difference in the calendar font size.... means the CSS is not targeting the diff resolutions and increasing the text font size as per css.

your page is loading in a frame I guess and your page does not have any CSS link in its source, so I cant make out if the CSS you said is indeed loading with the page.
ddantes

ASKER
The page which contains the calendar popups is loading in a frame.  However, the "child" page which appears in that parent frame is loading the stylesheet which now contains the adjustments you provided:  
<link rel="stylesheet" type="text/css" media="all" href="http://www.mauitradewinds.com/RezEasy/style/calendar1.css">

Open in new window

Your help has saved me hundreds of hours of internet surfing.
fblack61
Prasadh Baapaat

I checked using Inspect Element in Firefox... I see 3 stylesheets here... but I dont see my code added to the calendar1.css
styles
Prasadh Baapaat

I can be sure its added only when I can see it in the right hand window in the inspect element.

I checked again by refreshing the page and reloading by Ctrl+F5, I still cant see the media queries in the stylesheet.
ddantes

ASKER
That's confusing!  Here is a screenshot of the end of the css file as it appears on the server, viewed from my FTP client...
End of calendar1.css code
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ddantes

ASKER
You can also navigate to http://www.mauitradewinds.com/RezEasy/style/   and download calendar1.css
Prasadh Baapaat

I can see anything inside the folder in above link... but when i checked this link - I got the CSS.... but WITHOUT the media queries in it.

here is a link you can check the CSS yourself: http://www.mauitradewinds.com/RezEasy/style/calendar1.css

plus I checked again with FIREBUG tool... I see the CSS but again without the medeia queries...  so my conclusion is that maybe some confusion is talking place in uploading the file...no media queries added
Prasadh Baapaat

so unless we both see my code in the CSS in this link http://www.mauitradewinds.com/RezEasy/style/calendar1.css, we cant be 100% sure its added on the server :)
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ddantes

ASKER
I can't understand why there is a discrepancy.  I followed the link you provided in your comment #40951187, opened the file, then copied the last section to my clipboard.  I'll paste it here:

/* Use larger font, which enlarges the calendar popups, for small notebook screens */

@media only screen and (min-width:1024px) and (max-width: 1280px)  {
.calendar, .calendar table {
     font-size: 12px;
}
}
@media only screen and (min-width:1280px) and (max-width: 1440px)  {
.calendar, .calendar table {
     font-size: 14px;
}
}
@media only screen and (min-width:1441px) and (max-width: 1768px)  {
.calendar, .calendar table {
     font-size: 15px;
}
}
@media only screen and (min-width: 1769px)  {
.calendar, .calendar table {
     font-size: 17px;
}
}
Prasadh Baapaat

Great ! I checked and now the file is showing the media queries AND the font is increasing as per the resolution :)

now I see the size of calendar in 1920 X 1080 resolution is DECENT TO READ.

so I guess now you can ask your client to check if its readable now....
Prasadh Baapaat

I also checked on my mobile which is a calling-tab 7 inches and the calendar is definitely readable now.

check on your ipad... the size of calendar should look bigger now.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ddantes

ASKER
I think this has really helped.  I can see the difference under IE11, Firefox and Chrome, when the screen resolution is high.  Unfortunately, there doesn't seem to be any difference under Safari, so my iPad doesn't demonstrate the change.  If you have any suggestion about that, please let me know.  I'll also ask the guest who mentioned this issue to check on his device.

I'm happy with the result -- it enlarged the popups and font, and didn't displace them from near the screen center.
Prasadh Baapaat

my safari browser on desktop shows the increased font size fine, but safari on iPad and iPhone has to be targeted with a little bit different media query., it uses min-device-width .... the word device is extra

/* Use larger font for iPad and iPhone */

@media only screen and (min-device-width:768px) and (max-device-width: 1024px)  {
.calendar, .calendar table {
     font-size: 12px;
}
}

for further reference: here you will get a list of all different IOS media queries

hope this helped and let me know if you have any further questions.
thanks,
Prasadh
ddantes

ASKER
Thank you.  So, for every instance of min-width or max-width, shall I replace those with min-device-width and max-device-width?   Or will that interfere with all the other browser's behavior?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Prasadh Baapaat

well the deeper you dig, more queries you will find for numerous devices and resolutions :)

as per me most of ios devices will be covered by that one single query I gave. I guess you should add that new query and stop at that for now.

in future if any new complaint comes again, you know how to deal with it now... just ask the customer his device and resolution... and you can take it from there i guess :)

but remember that you cannot satisfy each and everyone with his own different device...
ddantes

ASKER
Understood.  You've been a great help.
Prasadh Baapaat

you are welcome :)
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.