Выровняйте текст по вертикали, используя полосу вкладок rad asp.net telerik

Я ищу способ выровнять мои полоски вкладок rad. Обычно я выравнивал их по горизонтали следующим образом:

---\    ---\     ------\
One \   |Two\    | Three|
----   -----     ------

Но теперь мое требование таково:

O-|
n |- This is one tab.It occupies the complete div.As in, the space you see below for two and     three.
e-|

T
w
o

T
h
r
e
e

Как мне добиться этого, используя элементы управления rad и asp.net? Когда я устанавливаю ориентацию вертикально слева, я получаю что-то вроде этого

One
Two
Three

Некоторые из моих кодов:

 <telerik:RadMultiPage ID="radCustInfo" runat="server" SelectedIndex="0" CssClass="outerMultiPage">
                            <telerik:RadPageView ID="radCustInfoPage" runat="server">
                                <telerik:RadTabStrip ID="radCustInfoTab" runat="server" MultiPageID="radMultiPageCustInfo"
                                    SelectedIndex="0" Orientation="VerticalLeft" Width="30px" Height="150px" Align="Left">
                                    <Tabs>
                                        <telerik:RadTab ImageUrl="images/companyTabStrip.gif" Width="30px" height="55px" ></telerik:RadTab>                                            
                                        <telerik:RadTab ImageUrl="images/contactsTabStrip.gif" Width="30px" height="60px" ></telerik:RadTab>                                            
                                        <telerik:RadTab ImageUrl="images/notesTabStrip.gif" Width="30px" height="50px" ></telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>

                                <telerik:RadMultiPage runat="server" ID="radMultiPageCustInfo" SelectedIndex="0" CssClass="innerMultiPage">
                                    <telerik:RadPageView runat="server" ID="PageView1" BackColor="White">  
                                        <table style="vertical-align:top; height:75px;">
                                            <tr>
                                                <td style="vertical-align: top; height: 75px; width:75px;">
                                                    <b class="infoTitle">Company:</b><br />
                                                    <asp:Literal ID="litCompany" runat="server" /><br />
                                                    <asp:HyperLink ID="HyperLink1" runat="server" Text="Edit Customer" Target="_blank" Visible="false" />
                                                </td>
                                                <td style="vertical-align: top; height: 100px;">
                                                    <div class="divAddress" style="height: 70px">
                                                        <b class="infoTitle">Address:</b><br />
                                                        <asp:Literal ID="litAddress" runat="server" /><br />
                                            </tr>
                                        </table>                                                                                 
                                    </telerik:RadPageView>

... и т. д. Я использовал изображение, и оно выглядит не очень хорошо. Я настроил css для rts, rtsLink, rtsLI и т. д., но, похоже, ничего не работает. Может ли кто-нибудь указать мне правильное направление? Если вам нужна дополнительная информация, пожалуйста, спросите. Спасибо


vertical-alignment css telerik orientation rad-controls
person RookieAppler    schedule 14.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо RadTabStrip используйте Telerik RadSpliiter

Ознакомьтесь с этими демонстрациями, чтобы начать

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_slidedirection/defaultcs.aspx

person Arun Bertil    schedule 15.10.2013

arrow_upward
0
arrow_downward

Попробуй это:

  .box_rotate {
     -moz-transform: rotate(90deg);  /* FF3.5+ */
       -o-transform: rotate(90deg);  /* Opera 10.5 */
  -webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

ASPX:

<telerik:RadTabStrip ID="tab1" runat="server" Orientation="VerticalLeft">
            <Tabs>
                <telerik:RadTab Text="Tab1" runat="server" CssClass="box_rotate">
                </telerik:RadTab>
                <telerik:RadTab Text="Tab2" runat="server" CssClass="box_rotate">
                </telerik:RadTab>
                <telerik:RadTab Text="Tab3" runat="server" CssClass="box_rotate">
                </telerik:RadTab>
                <telerik:RadTab Text="Tab4" runat="server" CssClass="box_rotate">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
person Saritha.S.R    schedule 15.10.2013