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

Radslider display issue in IE

2 Answers 62 Views

Slider

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

Vijayasarathi asked on 27 Nov 2013, 09:21 AM

radslider.JPG

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;

}

.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;

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>

</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>

</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>

</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>

</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>

2 Answers, 1 is accepted

answered on 28 Nov 2013, 02:34 PM

Slider.PNG

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

answered on 28 Nov 2013, 04:24 PM

SliderSample.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Radslider display issue in IE

2 Answers, 1 is accepted