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

ToolBar Design

1 Answer 41 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Vuyiswa
Top achievements
Rank 2
Vuyiswa asked on 13 Aug 2010, 08:14 AM
Good Day All

I have a Toolbar that is Currently defined like this

<telerik:RadToolBar ID="RadToolBar1" Runat="server" EnableViewState="False"
                    Height="100%" Skin="Forest" Width="100%">
                    <Items>
                        <telerik:RadToolBarButton Width="100%" runat="server" Text="Button1">
                            <ItemTemplate>
                                <asp:ImageButton ID="btnoweb"    runat="server" Height="50"
                                    ImageUrl="~/images/o!logo.png" Width="50" />
                                <asp:ImageButton ID="btnCalender"     runat="server"
                                    ImageUrl="~/images/CalenderView.png" OnClick="btnCalender_Click" />
                                <asp:ImageButton ID="btnAttach"    runat="server" ImageUrl="~/images/Attach.png" />
                                <asp:Menu ID="mnuMenu" runat="server">
                                </asp:Menu>
                                <telerik:RadMenu ID="mnuAdd"   runat="server" Visible="true">
                                    <ItemTemplate>
                                        <asp:Image ID="imgicon"     runat="server" EnableViewState="false"
                                            ImageUrl="~/images/Add.png" />
                                    </ItemTemplate>
                                </telerik:RadMenu>
                                <asp:TextBox ID="txtsearch" runat="server"    onkeypress="keyPress()" Font-Size="X-Large" Height="40px"
                                      Width="650px"></asp:TextBox>
                                <asp:ImageButton ID="btnsearch"     runat="server"
                                    ImageUrl="~/images/btnsearch.png" OnClick="btnSearch_Click" />
                                <asp:ImageButton ID="btnCancel"    runat="server" ImageUrl="~/images/Cancel.png"
                                    OnClick="btnCancel_Click" />
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>


And Currently it looks like the one in the Image named "Current_ToolBar" and the one that i want is supposed to look like the image ToolBarDesign. As you can see the round corners and the textbox is inside and the the  image button on the right looks as if is inside the text and the other icon on the left.

How can i do this Design.

Thanks



1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 18 Aug 2010, 01:01 PM
Hello Vuyiswa,

You are using template and the controls inside it can be aligned in different ways with css without affecting the toolbar. I suggest you to use relative positioning to overlay the input and the button like this.

Regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ToolBar
Asked by
Vuyiswa
Top achievements
Rank 2
Answers by
Yana
Telerik team
Share this question
or