This is a migrated thread and some comments may be shown as answers.

Radslider display issue in IE

2 Answers 44 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Vijayasarathi
Top achievements
Rank 1
Vijayasarathi asked on 27 Nov 2013, 09:21 AM
Hi Team,

We are facing an issue in Radslider while displaying the value through C#.
I have submitted the aspx code , css and error image.
 We are using  Telerik version : 2011, 2, 915, 35

CSS
<style type="text/css">
    
    .OutlookSkinGradBackground
        {
            background:#043199 0 -2100px repeat-x url('img/sprite.gif');
            color:#fff;
            height: 50px;
            text-align: center;
            vertical-align: middle;   
        
    .contentWrapper
    {
        width:100%;
        margin:0 auto;
    }
     
    .mainContent
    {
     padding-left:25%;
     padding-top:10px;
    }
     
     
    #header {
        padding:0.5% 1%;
        background:#ddd;
        height:3.2em;
        text-align:center;
    }
 
     .footer
     {
         clear:both;
         padding:5px 10px;
     }
 
 
    #footer p
    {
        margin:0;
    }
 
    .sliderTable     {
        float: left; 
        width: 500px;
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
        padding:10px ;
    }
      
    .sliderHeader, .fuelEconSliderHeader, .payloadSliderHeader, .bioContentSliderHeader,.cO2EfficiencySliderHeader
    {
        width: 150px;
        font-family:Verdana;
        font-weight:bold;
        font-size: 0.8em;
        vertical-align: middle;
        text-align: center;
        border-style:groove;
        border-width: 1px;
        color: #FFFFFF;
        height: 50px;
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
    }
        
    .fuelEconSliderHeader
    {
        background-color: #660066;
    }
     
    .payloadSliderHeader
    {
        background-color: #009999;
    }
 
    .bioContentSliderHeader
    {
        background-color: #99CC00;
    }
       
    .cO2EfficiencySliderHeader
     {
        background-color: #89A54E;
 
     }
       
    .sliderValue
    {
        text-align: left;
        font-family:Verdana;
        font-size:1.0em;
        padding-top:10px;
        padding-left:65px;
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
        height:30px;
  }
    
    .tableSliderTd
    {
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
        padding-bottom:10px;
        padding-bottom:10px;
   }
      
      .tableSliderWrapper
 
    {
         vertical-align:top;
         text-align:center;
         width: 150px;
   }
   
     
    .tableSliderActualValue
    {
         float:left;
         width: 55px;
         text-align: right;
         font-family:Verdana;
         font-size:0.8em;
         padding-top:140px;
  }
        
    .tableSliderTrackContainer
    {
      float:right;
      width: 95px;
    }
  
    .HiddenItems .rslItem span
    {
        visibility:hidden;
    }
     
    .errorText
    {
        font-family:Verdana;
        font-size:small;
        color:Red;
        float:left;
    }
     
    .hiddenFields
    {
        visibility:hidden;
    }
     
     
    .metricsSummaryTableDiv
    {
         clear:both;
         padding-top:10px;
         padding-left:10px;
    }
     
    .metricsSummaryTableNoBordersTD
    {
     border-collapse:collapse;
     border-width:0px;
    }
     
     
    .metricsSummaryTableHeaderTD,.metricsSummaryTableFactorTD, .metricsSummaryTableValueTD
    {
        text-align:center;
        font-family:Verdana;
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
   }
    
    
   .metricsSummaryTableHeaderTD,.metricsSummaryTableFactorTD, .metricsSummaryTableValueTD,.metricsSummaryTableImageTD
   {
        text-align:center;
        font-family:Verdana;
        border-style: solid;
        border-width: 1px;
        border-color: #CCCCFF;
        width:115px;
   }
     
    .metricsSummaryTableHeaderTD
    {
        font-size:0.75em;
    }
     
     
    .metricsSummaryTableFactorTD
    {
        font-size:0.8em;
        font-weight:bold;
        height:30px;
    }
     
    .metricsSummaryTableValueTD
    {
        font-size:1.0em;
        height:30px;
        width:80px;
        padding-left:20px;
    }
     
    .metricsSummaryTableImageTD
    {
    }
     
    .gen-report-logo {
        float:left;
    }
     
    .gen-report-header-Title {
        float:right;
        margin-right:25%;
        width:50%
    }
     
    .genricReportFilterText
    {
        text-align:center;
        text-align:center;
        font-size:1em;
        margin-bottom: 2px;
    }
     
     
    .genricReportTitle
    {
        text-align:center;
        font-size:1.5em;
        font-weight:bold;
        margin-bottom: 2px;
    }
     
        /* Turn Red Color on Links Roll Over */
        a.SelectedItem:link,
        a.SelectedItem:visited {
          color:#333333;
        }
 
        a.SelectedItem:hover {
          color:Red;
        }
        /*  -- Changes the Color on Link Clicked
        a.SelectedItem:active {
          color:#ffffff;
        } */
        /* Turn Red Color on Links Roll Over */
     
</style>
 
 
 
 
 
 
 
 
SLIDEBAR
<div class="mainContent">
   
             <table class="sliderTable" id="SliderContainer" runat="server">
 
                    <%--------------------------------------------%>                   
                    <%-- Header Row                             --%>
                    <%--------------------------------------------%>                   
                   <tr>
                       <%--         Fuel Econ Slider               --%>
                       <td class ="fuelEconSliderHeader">                
                            <asp:Label
                                ID      ="fuelEconomyHeaderLabel"
                                runat   ="server" >
                            </asp:Label>
                       </td>
       
                       <%--           Payload Slider               --%>
                       <td class ="payloadSliderHeader">
                            <asp:Label
                                ID      ="payloadHeaderLabel"
                                runat   ="server" >
                            </asp:Label>
                        </td>
 
                       <%--           Bio Content Slider           --%>
                       <td class ="bioContentSliderHeader">
                            <asp:Label
                                ID      ="bioContentHeaderLabel"
                                runat   ="server" >
                            </asp:Label>
                       </td>
 
                       <%--          CO2 Efficiency Slider         --%>
                       <td class ="cO2EfficiencySliderHeader">
                            <asp:Label
                                ID      ="cO2EfficiencyHeaderLabel"
                                runat   ="server" >
                            </asp:Label>
                        </td>
                    </tr>
 
                    <%--------------------------------------------%>                   
                    <%-- slider Value Row                       --%>
                    <%--------------------------------------------%>                   
                    <tr>
                        <td>
                            <div class ="sliderValue">
                                <asp:Label
                                        ID          ="FuelEconSliderValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="FuelEconomySliderValueToolTip" >
                                 </asp:Label>
                            </div>
                        </td>    
               
                        <td>
                            <div class ="sliderValue">
                                <asp:Label
                                        ID          ="PayloadSliderValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="PayloadSliderValueToolTip" >
                                </asp:Label>                      
                            </div>
                        </td>    
 
                        <td>
                            <div class="sliderValue">
                                 <asp:Label
                                        ID          ="BioContentSliderValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="BioContentSliderValueToolTip"  >
                                  </asp:Label>
                             </div>                     
                        </td>    
      
                        <td style="background-color: #EEEEEE">
                            <div class ="sliderValue">
                                   <asp:Label
                                        ID          ="CO2EfficiencySliderValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="CO2EfficiencySliderValueToolTip"
                                    </asp:Label>
                            </div>
                        </td>    
                    </tr>
 
                    <%--------------------------------------------%>                   
                    <%-- slider Row                             --%>
                    <%--------------------------------------------%>                   
                    <tr>
                        <td class="tableSliderTd">
                            <div class="tableSliderWrapper">
                                <div class="tableSliderActualValue" >
                                    <asp:Label
                                        ID          ="FuelEconomyActualValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="FuelEconomyActualValueToolTip" >
                                    </asp:Label>
                                </div>
                                <div class="tableSliderTrackContainer">
                                   <telerik:RadSlider
                                            ID                      ="RadSliderEconomy"
                                            runat                   ="server" 
                                            Width                   ="60px"
                                            Height                  ="300px"
                                            TrackPosition           ="TopLeft"
                                            OnClientValueChanged    ="FuelEconSliderValueChanged"
                                            IsDirectionReversed     ="true"
                                            Orientation             ="Vertical"
                                            MinimumValue            ="15"
                                            MaximumValue            ="45"
                                            SmallChange             ="1"
                                            LargeChange             ="5"
                                            ItemType                ="Tick"
                                           Skin                     ="Office2007" >
                                     </telerik:RadSlider>
                                </div>
                             </div>
                        </td>
                         
                        <td class="tableSliderTd">
                            <div class="tableSliderWrapper">
                                <div class="tableSliderActualValue" id="Div1">
                                    <asp:Label
                                        ID          ="PayloadActualValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="PayloadActualValueToolTip" >
                                    </asp:Label>
                                </div>
                                <div class="tableSliderTrackContainer">
                                   <telerik:RadSlider
                                            ID                      ="RadSliderPayload"
                                            runat                   ="server" 
                                            Width                   ="60px"
                                            Height                  ="300px"
                                            TrackPosition           ="TopLeft"
                                            OnClientValueChanged    ="PayloadSliderValueChanged"
                                            IsDirectionReversed     ="true"
                                            Orientation             ="Vertical"
                                            MinimumValue            ="5"
                                            MaximumValue            ="25"
                                            SmallChange             ="1"
                                            LargeChange             ="5"
                                            ItemType                ="Tick"
                                            Skin                     ="Office2007" >
                                         </telerik:RadSlider>
                                </div>
                            </div>
                         </td>
 
                        <td class="tableSliderTd">
                            <div class="tableSliderWrapper">
                                <div class="tableSliderActualValue" id="BioContentActualValue">
                                       <asp:Label
                                        ID          ="BioContentActualValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="BioContentActualValueToolTip" >
                                    </asp:Label>
                               </div>
                                <div class="tableSliderTrackContainer">
                                         <telerik:RadSlider
                                            ID                      ="RadSliderBioContent"
                                            runat                   ="server" 
                                            Width                   ="60px"
                                            Height                  ="300px"
                                            TrackPosition           ="TopLeft"
                                            OnClientValueChanged    ="BioContentSliderValueChanged"
                                            IsDirectionReversed     ="true"
                                            Orientation             ="Vertical"
                                            MinimumValue            ="2"
                                            MaximumValue            ="5"
                                            SmallChange             ="0.1"
                                            LargeChange             ="1"
                                            ItemType                ="Tick"
                                           Skin                     ="Office2007" >
                                      </telerik:RadSlider>
                                  </div>
                              </div>
                          </td>
      
                        <td class="tableSliderTd" style="background-color: #EEEEEE">
                           <div class="tableSliderWrapper">
                                <div class="tableSliderActualValue" >
                                       <asp:Label
                                        ID          ="CO2EfficiencyActualValueLabel"
                                        runat       ="server"
                                        Text        ="0"
                                        ToolTip     ="CO2EfficiencyActualValueToolTip">
                                    </asp:Label>
                                </div>
                                <div class="tableSliderTrackContainer" >
                                     <telerik:RadSlider
                                            ID                      ="CO2EfficiencySlider"
                                            runat                   ="server" 
                                            Width                   ="60px"
                                            Height                  ="300px"
                                            TrackPosition           ="TopLeft"
                                            IsDirectionReversed     ="true"
                                            Orientation             ="Vertical"
                                            OnClientValueChanging   ="OnBeforeCO2EfficiencyValueChange"
                                            MinimumValue            ="0"
                                            MaximumValue            ="100"
                                            SmallChange             ="1"
                                            LargeChange             ="10"
                                            ItemType                ="Tick" 
                                            ShowDragHandle          ="true"                                
                                            ShowDecreaseHandle      ="false"
                                            ShowIncreaseHandle      ="false"
                                           Skin                     ="Office2007" >
                                      </telerik:RadSlider>
                                   </div>
                            </div>
                        </td>
                     </tr>
            </table>     
             
            <%--------------------------------------------%> 
            <%-- Metrics Summary                        --%>
            <%--------------------------------------------%>                   
           
            <div class="metricsSummaryTableDiv">
                <table>
                    <tr>
                        <td class="metricsSummaryTableNoBordersTD" />
 
                        <td class ="metricsSummaryTableHeaderTD">
                            <asp:Label
                                ID      ="EstimatedCO2EfficiencyMetricsHeader"
                                runat   ="server" >
                            </asp:Label>
                        </td>
 
                        <td class ="metricsSummaryTableHeaderTD">
                            <asp:Label
                                ID      ="ActualCO2EfficiencyMetricsHeader"
                                runat   ="server" >
                            </asp:Label>
                        </td>
 
                        <td class ="metricsSummaryTableHeaderTD">
                            <asp:Label
                                ID      ="TargetCO2EfficiencyMetricsHeader"
                                 runat   ="server" >
                            </asp:Label>
                        </td>
 
                        <td class="metricsSummaryTableNoBordersTD" />
 
                    </tr>
                     
                    <tr>              
                       <td class ="metricsSummaryTableFactorTD">
                            <asp:Label
                                ID      ="MetricsSummaryTableFactorName"
                                Text    ="MetricsSummaryTableFactorName"
                                runat   ="server" >
                            </asp:Label>
                       </td>
                     
                       <td class ="metricsSummaryTableValueTD">
                            <asp:Label
                               ID       ="EstimatedCO2EfficiencyMetricsValue"
                               text     ="0"     
                               runat    ="server" >
                            </asp:Label>
                       </td>
 
                       <td class ="metricsSummaryTableValueTD">
                            <asp:Label
                                ID      ="ActualCO2EfficiencyMetricsValue"
                               text     ="0"     
                               runat    ="server" >
                            </asp:Label>
                       </td>
                     
                       <td class ="metricsSummaryTableValueTD">
                            <asp:Label
                                ID      ="TargetCO2EfficiencyMetricsValue"
                               text     ="0"     
                               runat    ="server" >
                            </asp:Label>
                       </td>
                         
                       <td class ="metricsSummaryTableImageTD">
                           <asp:Image
                                ID      ="CO2EfficiencyTargetIndicatorImage"
                                runat   ="server"
                                ImageUrl="" />
                       </td>
                    </tr>
                </table>
            </div>       
       </div>

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 28 Nov 2013, 02:34 PM
Hi Vijayasarathi

I tried the following code in Telerik Version 2013.2.611.40 and it worked as expected.
So try updating your version.Check the attached screenshot which worked on my end.

Thanks
Shinu
0
Slav
Telerik team
answered on 28 Nov 2013, 04:24 PM
Hello,

You can also check whether there are additional styles that could be affecting the appearance of the slider. I have attached a test page that includes the code you sent. Please review it and let me know what should be changed in order for the issue to be reproduced.

If you are seeing the problem without making any changes, clarify which is the browser you are currently using.

Regards,
Slav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Slider
Asked by
Vijayasarathi
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Slav
Telerik team
Share this question
or