I am currently utilizing the JQDateRangeSlider for its intended purpose. However, I have encountered an issue with the Ruler component, specifically in displaying new months/years, similar to the example showcased here:
During testing on Safari, I noticed a gap at the end where additional ticks should have been displayed. This is not stemming from a JavaScript or plugin problem, as the widths are calculated using percentages. It seems to be purely a display glitch. The problem can be seen in the image below:
The issue arises when there are multiple inline-block floated elements with their widths and margin-left properties specified as percentages. For instance:
<div class="ui-ruler-scale ui-ruler-scale1">
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
**[remaining code omitted for brevity]**
</div>
The CSS involved does not need to be overly complex since most of the styling is done through inline styles. In the provided example, the elements are floated left and contain a set margin-left property.
I have created a JSFiddle that showcases the issue based on just the HTML + CSS components. It's worth noting that this problem persists even with basic widths like 1%, not exclusively with more intricate multi-decimal point measurements found in my example.
Regrettably, formatting the HTML in a user-friendly manner results in added whitespace, making it less legible.
Thank you