CssClass property on RadSplitter doesn't work

[shaun]

I created a radsplitter with this line:
<telerik:RadSplitter id="rsTest" runat="server" height="150px" width="100%" Orientation="Horizontal" CssClass="Test">

And it renders to the page as:
<div id="ctl00_rsTest">...</div>

I know I can wrap the splitter in another div, but why expose and document the CssClass property if it doesn't work?

-Shaun

[Valentin.Stoychev]

Hi shaun,

Thanks for pointing this out - this issue will be fixed in the next release.

Best wishes,
Valentin.Stoychev
the telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rycho]

Hi, is there any chance the CssClass will start to work? How can I disable 1px border for only one instance of RadSplitter in my project? The other instances should remain its default global RadControls/Splitter/skins css style (border: solid 1px)

I tried to get client-side reference to splitter htmlelement style property during OnClientLoaded event but with no luck.

Rycho

[Svetlina Anati]

Hi Rycho,

I am not quite sure what exactly you mean by "disable the border" but I assume that it means that you want to remove it.

In case my assumptions are correct I suggest to examine this KB article.

Another option is to use your custom skin and make the desired settings there. You can find more information about controlling visual appearance with custom skins here.



Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rycho]

Hello,

In deed, I meant to turn off the border but referring to my previous post I cannot use css class inside skin file because the whole project uses splitters with border width set to 1. I was lochooking for hint which would allow me to set border to 0 just for only one instance of splitter control. In order to do so I need  to utilize client-size html DOM element structure but  I'm stuck with this.  I could quit searching if there would be a fix for this in the nearest future.

Rycho

[Svetlina Anati]

Hello Rycho,

1. Did you try to remove the border through the RadSplitter's BorderSize and PanesBorderSize properties as explained here?
2. When you modify a skin, you should copy it to your project and then set the EnableEmbeddedSkins property to false as explained here. This being said all your other RadSplitters will use the standard skin because their EnableEmbeddedSkins property will be set to true (which is by default) and they will not use your custom skin.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[aquillin]

I am having the same issue... I cannot get rid of the bloody 1 px border around the.  I have tried what was stated in the post.  Here is what is on my aspx page



in the header

<

link href="/Components/RadControls/Skins/CSMOutlines/Splitter.CSMOutlines.css" rel="stylesheet" type="text/css" />

in the body

<Telerik:RadSplitter ID="rs_ContentOutline" Runat="server" Width="100%" Height="100%"

Skin="CSMOutlines" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderWidth="0" >

<Telerik:RadPane ID="pane_Outline" Runat="server" Width="375" MinWidth="375" BorderWidth="0">

</Telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" />

<Telerik:RadPane ID="pane_Content" runat="server" BorderWidth="0"

ContentUrl="/ContentSetManager/Resources/ContentOutlineWelcome.aspx">

</Telerik:RadPane>

</Telerik:RadSplitter>

here are the things in my css file (just what they said to modify.)  It is a copy of the web20 skin that I modified the skin name and these 2 classes

.RadSplitter_CSMOutlines

{

border: 0px;

}

/* splitter table wrapper */

.RadSplitter_CSMOutlines

.pane,
.RadSplitter_CSMOutlines .paneHorizontal
{

padding: 0px;

text-align:left;

border: 0px;

}

When I look at the source code that is rendered, it is adding a border-width:1px to the style of the root table element.

<table id="RAD_SPLITTER_rs_ContentOutline" class="RadSplitter_CSMOutlines" cellpadding="0" cellspacing="0" style="width:100%;height:100%;visibility:visible;border-width:1px;">

Please help.

[Svetlina Anati]

Hello aquillin,

It seems that some other style overrides yours.

Since I do not have your code I am not quite sure what exactly happens. What I can suggest is to add the keyword !important after your border's setting as shown below:

border: 0px !important;

In case this does not help, please open a new support ticket and send me a test project which reproduces the problem. Once I get it I will do my best to help.


All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center