Badges and broken layout in year view

[optimusprimed]

Hi,

We downloaded the latest version from Git, and added our own custom events for January, May and September. For all other months, when hovering over a month, the gray background does not fill the whole cell, and the red badges in Jan/May/Sept are aligned to the left-most margin. This is reproducable on the demo code and is not a CSS conflict.

Please can this be fixed as we'd love to use the calendar on a live website.

Thank you for this great calendar.

[optimusprimed]

Please can this be marked as a bug since it is reproducable in the latest code by adding some events.

[optimusprimed]

Is there a fix for this yet?

[Serhioromano]

Not yet found out how to solve that in twbs 2.

[optimusprimed]

Ok thanks, we'll remove the year view in the meantime.

[optimusprimed]

that does not solve the issue. The issue is CSS.

From: JOJOManLV Sent: Monday, June 02, 2014 10:22 AM To: Serhioromano/bootstrap-calendar Cc: optimusprimed Subject: Re: [bootstrap-calendar] Badges and broken layout in year view (#207)

Hi... Got email.. And yes it can be fixed... So open app.js Find line 10:

day: '2013-03-12', and edit this line to

day: 'now', and this work for me...

— Reply to this email directly or view it on GitHub.

[eleazan]

Well....

This can be fixed with a little custom css:

Probably, you want to set some margin to badge, but... that's easy

PD: Bootstrap 2 add some margin-left (about 20px!) to the span elements, and a width about 23%... and bootstrap3 doesn't do that! The solution is overriding these margin-left and width of the span3 elements ;)

[optimusprimed]

yes, I’ve done that and the badge has a left margin now. However, the background hover is all wrong and corrupted, with gaps on left and right. Not easy to change.

If it’s easy, send me the CSS to fix

From: Andrés Sent: Monday, June 02, 2014 4:00 PM To: Serhioromano/bootstrap-calendar Cc: optimusprimed Subject: Re: [bootstrap-calendar] Badges and broken layout in year view (#207)

Well....

This can be fixed with a little custom css:

Probably, you want to set some margin to badge, but... that's easy

PD: Bootstrap 2 add some margin-left (about 20px!) to the span elements, and a width about 23%... and bootstrap3 doesn't do that! The solution is overriding these margin-left and width of the span3 elements ;)

— Reply to this email directly or view it on GitHub.

[eleazan]

You see the image attached? It has the css...

You can try with the Chrome console to execute this in the demo webpage:

$("[data-cal-row^=-month]").css("margin-left", "0px").css("width", "25%")

Or add the css:

[data-cal-row^=-month] {
    margin-left: 0px;
    width: 25%
}

[optimusprimed]

I added the CSS, same problem.

[eleazan]

But, it fixes the hover issue?

At demo page too? :/ Browser?

[optimusprimed]

Browser IE9. Did not fix. made it worse in fact.

[eleazan]

I not have IE9... only IE8. And in IE8 work's, the demo site, with my fix, like a charm

[optimusprimed]

Hi Andres, please put your fixed calendar online somewhere so that I can download and see it myself. Thanks.

[eleazan]

Try yourself on demo page.

When it's open with IE, press "Year", for goes to year page's. Then F12 for open the developer tools, and a window is open. Press "Script", and write these line:

$("[data-cal-row^=-month]").css("margin-left", "0px").css("width", "25%")

And execute the script.

Yoy may now see the Year correct. If it has, that's the fix for IE9 too.

PD: Sorry my bad english :'(

[optimusprimed]

Andres, I have 3 web browsers. The same problem occurs in all of them. Look at Chrome for example – all gaps around the badges. This is not just an IE9 issue!

Please, can you add some more events for other months? For January, May and December say, so we can test this?

Why is it so hard for you to add some more events in different months, so that all cells can be tested?

[optimusprimed]

Hi Andres,

Here is what I see after applying your fix – this is Chrome and IE9:

[eleazan]

You see a white line?

Or maybe you miss to attach an image?

[eleazan]

No responso, so i close... >_<