Forums - Print Thread - Mini Interactive Calendar cuts the Pop Balloons off

Forums » List all forums » » Forum: Known Problems » » » Thread: Mini Interactive Calendar cuts the Pop Balloons off
Print at Apr 20, 2024, 6:51:34 AM	View all posts in this thread on one page

Posted by timemachinebandagent at Dec 19, 2015, 6:23:31 PM

Mini Interactive Calendar cuts the Pop Balloons off
Hello.
I know this has been discussed before and I am not very good with computers when it comes to fixing a CSS or what not cause that seems to be what the problem is apparently from what I have read on other threads.

Our website is www.timemachinetheband.com and on the calendar portion we have the desktop version and a mobile version.
The mobile version we use the mini interactive calendar because it fits unlike the full calendar. But on some of the dates, when you click on them the pop up balloon is cut off and you can't see the date information.

Here is the link that is copied and pasted.....




<style type="text/css">
.localendar-close {
position: absolute;
top: 4px;
right: 4px;
margin:2px;
border: none;
}
.localendar-mini td, th {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
font-family: arial;
font-size: 16px;
}
.localendar-label,.localendar-time,.localendar-title {
font-family:arial;font-size:12px;
}
.localendar-label {
font-weight:bold;font-size:14px;
}
.localendar-hasEvents {
background:orange !important;
cursor: pointer;
}
.localendar-selected {
/* Uncomment to enable this feature
background-color: yellow;
*/
}
.localendar-monthName{
background-color:#404040;
color: #ffffff;
/* Uncomment this to hide the Month name
display:none;
*/
}
.localendar-balloon{
text-align:left;
}
</style>
<script>
// Other settings you can customize for your site
var lcPopupColor="rgba(230, 230, 230, .9)"; /* Try other values like: rgb(230,230,230), #b0c4de, yellow, etc */
var lcPopupOutline="#333333";
var lcPopupCornerRadius=20; /* Set to 0 for square corners */
</script>
<script type="text/javascript" src='//www.localendar.com/js/PublishedIncludeMini.js'></script>


<script type="text/javascript" src='//www.localendar.com/public/timemachinebandagent?style=M5&include=Y'></script>

Please can you tell me how to fix the pop up balloon problem so that people can see the full pop up balloon on all dates?

Thank you.

Posted by support at Dec 23, 2015, 7:29:14 PM

Re: Mini Interactive Calendar cuts the Pop Balloons off
Is there a url where I can hit the mobile site directly, or do I have to check only from a mobile device?

The most common cause of why you are seeing is somewhere in an element surrounding the mini calendar (most likely a <div>) there is a property called overflow which is set to hidden

Setting it to visible or auto will usually fix the problem.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

Posted by timemachinebandagent at Dec 24, 2015, 3:26:04 AM

Re: Mini Interactive Calendar cuts the Pop Balloons off
I changed it temporarily to where you can see it now on desktop.
Please let me know what I need to do

Posted by support at Dec 29, 2015, 4:48:33 PM

Re: Mini Interactive Calendar cuts the Pop Balloons off
My initial thought was incorrect. Based on what I see on the site now, the code for the mini-calendar was placed in an iframe. Naturally, the popups and other content are going to be sized to only fit inside the iframe.

The mini calendar isn't intended to be placed on a page, which is then placed in an iframe. The Script tag generated for the mini calendar should be placed directly on the page where you want it to appear. You should not use an iframe.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news