Hi,
I am trying to achive the splitter button as in the image file attached. Do i need to change the css for this
I am trying to achive the splitter button as in the image file attached. Do i need to change the css for this
4 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 21 Mar 2013, 09:59 AM
Hi,
Try overriding the default CSS.
CSS:
Thanks,
Princy
Try overriding the default CSS.
CSS:
.RadSplitter_Default .rspPaneTabContainer, .RadSplitter_Default .rspSlideHeaderDockIcon, .RadSplitter_Default .rspSlideHeaderUndockIcon, .RadSplitter_Default .rspSlideHeaderCollapseIcon, .RadSplitter_Default .rspCollapseBarExpand, .RadSplitter_Default .rspCollapseBarCollapse, .RadSplitter_Default .rspCollapseBarHorizontalExpand, .RadSplitter_Default .rspCollapseBarHorizontalCollapse {
background-image
:
url
(
"/Img.gif"
)
!important
;
}
Thanks,
Princy
0
Lara
Top achievements
Rank 1
answered on 21 Mar 2013, 10:11 AM
i have not used any images with the present code . i have attached the present display and the wanted display
0
Lara
Top achievements
Rank 1
answered on 22 Mar 2013, 03:51 AM
The image attached in the above reply was appearing by default.The collapsible buttons are one below the other. But i want them one beside the other
0
Hi Lara,
Basically there are two possible ways to achieve the descried scenario:
Vesi
the Telerik team
Basically there are two possible ways to achieve the descried scenario:
- You could use two RadSplitbars, without a RadPane between them, e.g:
<
telerik:RadSplitter
ID
=
"Radsplitter1"
runat
=
"server"
Width
=
"700"
Height
=
"800"
Orientation
=
"Vertical"
>
<
telerik:RadPane
ID
=
"Radpane1"
runat
=
"server"
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"Radsplitbar1"
runat
=
"server"
CollapseMode
=
"Forward"
>
</
telerik:RadSplitBar
>
<
telerik:RadSplitBar
ID
=
"Radsplitbar2"
runat
=
"server"
CollapseMode
=
"Backward"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"Radpane2"
runat
=
"server"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
- You could increase the Splitbar's width through the Splitter's SplitBarsSize property and overwrite the display CSS style of the bottom button:
<
telerik:RadSplitter
ID
=
"Radsplitter1"
runat
=
"server"
Width
=
"700"
Height
=
"800"
Orientation
=
"Vertical"
SplitBarsSize
=
"8"
>
<
telerik:RadPane
ID
=
"Radpane1"
runat
=
"server"
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"Radsplitbar1"
runat
=
"server"
CollapseMode
=
"Both"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"Radpane2"
runat
=
"server"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
<style type=
"text/css"
>
.RadSplitter .rspCollapseBarCollapse, .RadSplitter .rspCollapseBarExpand
{
display
:
inline
!important
;
}
</style>
Note, that in both of the described approaches, both of the buttons will remain visible after collapse.
Vesi
the Telerik team
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 their blog feed now.