3

I am using JQDateRangeSlider, for what it is intended. Unfortunately I am having issues with the Ruler part, which I am using to show new months/years, very similar to the example here:

http://ghusse.github.io/jQRangeSlider/options.html#scalesOption

I noticed when demoing my interface that on Safari, there was a gap at the end where more ticks should have been. This does not appear to be a JavaScript or plugin issue, as the widths are calculated as percentages. It's purely a display problem. The issue is as shown in the image below:

Image showing issue

The issue is when you have a number of inline-block floated elements, whose widths and margin-left properties are given as a %, for example:

<div class="ui-ruler-scale ui-ruler-scale1">

<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>

</div>

The CSS doesn't need to be complex as the inline style does most of the work. In my example below, the elements are floated left and have margin-left set.

I have set up a JSFiddle based on the HTML + CSS only, which displays the problem. To clarify, this appears to be a problem even with basic widths such as 1%, not just complex multi-decimal point widths like in my example.

http://jsfiddle.net/uLLMe/14/

Unfortunately I cannot format the HTML in a friendly manner, or it adds whitespace so It's rather unreadable.

Thanks

Chris
  • 1,888
  • 4
  • 21
  • 27
  • 2
    According to http://getbootstrap.com/getting-started/#support-safari-percentages, iOS Safari has some issues with percentage widths. I guess you're running into a similar issue on the desktop? – Olly Hodgson Mar 19 '14 at 09:51
  • Regarding the whitespace problem, check out the simple solution I worked out: http://stackoverflow.com/a/14776780/1654265 – Andrea Ligios Mar 19 '14 at 09:53
  • I think @OllyHodgson comment could actually be the right answer :/ – Andrea Ligios Mar 19 '14 at 09:56
  • Wow, good spot Olly, thanks. Surely this is a terrible oversight on Safari's part? How have more people not struggled with this?! – Chris Mar 19 '14 at 10:06
  • They have, but, well, http://dowebsitesneedtolookexactlythesameineverybrowser.com/. It's normally a very minor issue that most people don't notice. Under the hood it's a very difficult maths problem - converting percentage widths to exact pixel values without rounding up or down is basically impossible and every browser does it slightly differently. Yay! – Olly Hodgson Mar 19 '14 at 10:34
  • Using table-cell allows me to get *nearly* there even in Safari. Unfortunately I can't use margin-left on a table-cell div. Is there any way to set the cell-margin on only one side? (I can't use padding as it'll affect the width). http://jsfiddle.net/uLLMe/17/ – Chris Mar 19 '14 at 10:44
  • You could use padding if you set sliders `box-sizing` property to border-box – Teo Dragovic Mar 21 '14 at 11:55
  • 1
    FYI, your code does not show any of your elements floating. Inline-block is not remotely related to floating in any way. In fact, inline-block elements *cannot* float - floats are always block-level block containers. – BoltClock Apr 01 '14 at 16:32

1 Answers1

0

Too many 1% widths! Chances are that there is some rounding or other minor layout difference between other browsers and Safari. I would recommend figuring out the width you want and using a set width like "20px" instead. If you need the width expressed in a percentage, try playing around with the containing div -- maybe changing the size slightly? Make it an even number of pixels (dividable evenly by your # of percentages, eg if you have 50 1% divs, make the width of the containing div a multiple of 50...?).

And a few more thoughts...

Add some "foo" content to the divs?

<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"> &nbsp; </div>

Try making them NOT inline...

<div class="ui-ruler-tick" style=" display:block; float:left; width: 1%;"></div>
Joshua
  • 328
  • 1
  • 7