Put in css fix for overlapping sliders.

[alexhgreen07]

I noticed some overlap in the sliders when using the widget. This fixes it with css increase in margin.

[trentrichardson]

Hey Alex,

Thanks for submitting the css tweak. I tried this on the documentation page and it squeezes the sliders pretty small, to the point it could make the grid feature difficult to use. is the issue the sliders overlapping with the labels?

[alexhgreen07]

I've taken a screenshot of the issue. This is both on 'master' and 'dev' branches. I've tested using:

OS: Mac OS X 10.8.4
Browser: Firefox v22.0 (Funnelcake July 2012, mozilla14 - 1.0)
Browser: Safari v6.0.5

I haven't tested the fixes out for IE yet. I've attached the screenshots of the issue as well as the fix.

[alexhgreen07]

This may be due to browser specific CSS rendering. I'll be testing it out on IE a bit later.

[alexhgreen07]

I just tested it on IE v10.0.9200.16635. The same issue is present, see the screenshot below.

[trentrichardson]

Ok that looks like its from the font-size being so large. Is that
intentional for your project or do you prefer smaller font?
On Jul 28, 2013 7:11 PM, "alexhgreen07" notifications@github.com wrote:

I just tested it on IE v10.0.9200.16635. The same issue is present, see
the screenshot below.
[image: screen shot 2013-07-28 at 7 09 47 pm]https://f.cloud.github.com/assets/2157728/869013/e71a1c9e-f7da-11e2-94a2-df0d19fcfb12.png

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/615#issuecomment-21693233
.

[alexhgreen07]

Hi Trent,

You're exactly right with the font size. Reducing the font from 28px to 16px resulted in no overlap (large font was intentional). I'll have to think about this. Would it be a worthwhile to put the sliders on new lines? It's not too complex and should result in nice scaling as text size changes. The calendar portion of the widget scales well from 12px-28px, it would be nice to match that. (or one could do % width).

Your thoughts?

[trentrichardson]

Possibly someone more advanced at css than I could easily fix this.. new
line would be a sure fix but that will make the vertical layout very tall,
especially when using seconds, timezone, etc. so I kind of shy away from
that..

Percent would run into the same issue I think.

Possibly an easier most certain fix is to use a table so the cells dont
overlap.
On Jul 28, 2013 7:33 PM, "alexhgreen07" notifications@github.com wrote:

Hi Trent,

You're exactly right with the font size. Reducing the font from (font:
28px Verdana,Arial,Helvetica,sans-serif;) to 16px resulted in no overlap.
I'll have to think about this. Would it be a worthwhile to put the sliders
on new lines? It's not too complex and should result in nice scaling as
text size changes. The calendar portion of the widget scales well from
12px-28px, it would be nice to match that. (or one could do % width).

Your thoughts?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/615#issuecomment-21693617
.

[alexhgreen07]

I like the idea of using a table. I'll try and work through a solution using css but if that's not possible then a table would be the best option. Let's leave this pull request open and I'll submit a few more commits if I've found a decent solution.

PS: I love this widget, nice work on it.

[trentrichardson]

Thank you! Also if you do be sure to make changes on the dev branch if
possible. I just created a grunt project so the code is in the src folder.
On Jul 28, 2013 9:37 PM, "alexhgreen07" notifications@github.com wrote:

I like the idea of using a table. I'll try and work through a solution
using css but if that's not possible then a table would be the best option.
Let's leave this pull request open and I'll submit a few more commits if
I've found a decent solution.

PS: I love this widget, nice work on it.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/615#issuecomment-21695564
.

[alexhgreen07]

Sorry about that, I knew I should have been working out of dev. I'll make a new pull request where we can continue the discussion.