How to ensure visibility of long tickmark labels

24497

[Infragistics] Viktor Snezhko posted over 13 years ago

If application has long labels (triggered by large values of Min/MaxValue properties) and removes plus/minus buttons, then first and last labels can become partially invisible. Labels are center-aligned to their tickmarks and therefore their edges may go outside of bounds of control. So, edges of text can be chopped by overlow:hidden applied for main html element of slider.
Slider exposes all sorts of css classes and allow to modify almost all aspects of rendering.
Application may do one of the following:
1. Increase widths of margin-elements which are located on left and right edges of slider. Labels will be center aligned to tickmarks, but that will trigger increase of control-width, or better to say, it will decrease the size of track-bar. To increase widths of left/right margins, following attributes can be used:
width, margin-left/right, padding-left/right, min-width. Below sample uses width.

<ig:WebSlider ID="WebSlider1" runat="server" MinValueAsString="-123456" BackColor="Cyan" MaxValueAsString="123456" ShowPlusMinusButtons="False">
   <Track>
    <CssClasses MarginCssClass="marginCss" />
   </Track>
</ig:WebSlider>

2. Move first/last labels inside of control using margin-left. That will not change layout of track-bar and its size, though labels will not be center-aligned to their tickmarks.

<ig:WebSlider ID="WebSlider1" runat="server" MinValueAsString="-123456" BackColor="Cyan" MaxValueAsString="123456" ShowPlusMinusButtons="False">
   <Tickmarks>
   <CssClasses LabelLastCssClass="lastLabelCss" LabelFirstCssClass="firstLabelCss" />
   </Tickmarks>
</ig:WebSlider>