ToolBar Design

[Vuyiswa]

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

[Yana]

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