Radslider display issue in IE

3 posts, 0 answers
  1. Vijayasarathi
    Vijayasarathi avatar
    11 posts
    Member since:
    Jun 2011

    Posted 27 Nov 2013 Link to this post

    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. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Nov 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Nov 2013 Link to this post

    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.
Back to Top