css inconsistency?

Hey @balux,

So this is something that has come up for us before. The issue here is that when you are displaying the calendar in a popup or a modal box then the calendar will take the dimensions of the box into consideration for the responsive styles. So basically what happens is your box would be something like 600px wide for example and the plugin would use that value so it would make the responsive view show, even though it is on a desktop.

Things I have had people do in the past would be:

1.Check how big the box is at the start of the page load and make sure it is big enough to display the default calendar.

2. You could also try using CSS for parts of the calendar, but this would be my suggestion only if you can’t get 1 to work.

3. Modify the plugin JS (this is where the responsive magic happens) – this option would be a last resort and I do not recommend this as the changes would be wiped every plugin update.

I think the other issues you are experiencing might just be because you are resizing the browser window and not actually using it to test on mobile. It could also be related to #1 above, where if you have a fixed size set to your modal then the plugin would still be reading from that value and if the screen is too small then it won’t know because the modal box is fixed. Not sure of your exact situation with that though so let me know if that’s not the case.

This is a little tricky of an issue without actually seeing it so hopefully I have been able to at least give you some ideas to mess with going forward. Let me know if I have not helped and we can continue on.

Thanks!

Hi Nick, thanks for the reply!

My modal is actually full window..so basically is covering the whole webpage..however, my main concern now is my previous question a).
I noticed that if I change the month (in full window without any resize) it will then display it properly (as my img4).

I understood your response 1 but I don’t understand why then, when I first open the modal the calendar “won’t find the proper size” of the modal and if instead I just change month with the arrow, it will suddenly display fine..?

Thanks for your help!

Is the modal width and height set before the page is loaded or is it set after the page loads? If it is using JS to set the size of the container when the page loads then that could be a reason why.

Hi Nick,

that’s a good question and I’m not sure how to find this out. The js scripts are called at the beginning of the body tag (the modal is created inside it later in the page) but they are not related with the modal (they are bootstrap default). In the css (called in the head tag) I’m styling the modal as width: 100% but that’s it. However tomorrow I’ll put the website online so that I’ll be able to send you the link.

Thank you!

B.

Hi Nick,

here’s the page https://www.assatena.it/testbs/wordpress/

the section in the white one called Sale Prove with the 3 round images. clicking the images will trigger the modals that contain the calendars

Thank you!

@balux,

Sorry for the delay. Just took a look at your site, but I can’t seem to find where to get the calendar. Can you point me in the right direction?

Thanks!

Hi, ok so:
if you scroll down the section (by color) are: white (news), green(chi siamo), yellow(service), white(sale prove) and others.
Go to the white section (4th) Sale Prove. you see there are 3 green circles with images inside. click on those and you’ll open a modal with the calendar inside. Is that clearer?

Thanks!

actually, a simple solution: in the menu navbar (top) click on the second title (Sale Prove) which highlits in red when hovered. This will take you straight to the section with the images ??

Thank you I was able to find it this time ??

I am still looking around at it but I need more time to figure out if there is a solution.

I did see you have a lot of errors in the console also so I need to see if anything stands out there that could be causing the issue too.

I will get back to you with more detail as soon as I can, thanks for your patience!

Hi Nick, thank you for you help!

Ok sorry for the delay here. Let’s start off simple. You can try adding something like this to your CSS:

.simcal-calendar {
min-width: 1200px;
}

Adjust that accordingly to see if it makes a difference.

Hi Nick!

This solution will definitely enlarge the overall width of the calendar but it won’t actually change its appearence (as you can see now). I tried also adding a similar code for height and the total height of the calendar is increased but it still displays in the “folded” way.

Thanks for your patience ??

Can you check in your JS that creates the popup if there is a way to set the initial height? Or let me know what it is that you are using to do that?

That is definitely what the issue is. You can see because if you change to another month you will see it shows the events normal because after it is loaded the size is correct.

Hi Nick, sorry for the late reply. I am using bootstrap default js code to trigger the modal. I haven’t touch it as I was changing the modal size only through css.

Thank you!

B.

Ok I don’t know exactly what you would need to change then.

I would just look for any options to set the default size of the modal or if there is some CSS that can be changed to set the size larger from the beginning.