Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do display asp:panels on same line?

Tags:

asp.net

The markup below displays the panels one below the other. What I would like to do is display them right next to each other. Here is the markup:

<div>
    <asp:Panel ID="pnlA" runat="server">
        <img src="../images/A.png" /> 
        <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
    </asp:Panel>
    <asp:Panel ID="pnlB" runat="server">
        <img src="../images/B.png" /> 
        <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
    </asp:Panel>
</div>

The above currently displays it like so:

Image A

Image B

When in fact, I would like it like Image A Image B

The HTML rendered is pretty much the same as above, but the Panels are rendered as divs, so the structure without everything inside is:

<div>
    <div></div>
    <div></div>
<div>
like image 666
Xaisoft Avatar asked Sep 25 '09 17:09

Xaisoft


2 Answers

A Panel renders in HTML as a div. The easiest way is to just use CSS to override the default behavior of divs.

<asp:Panel ID="pnlA" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>

This example uses the style attribute, which gets passed on straight to the HTML. You can use CssClass if you prefer to do it in a reusable stylesheet of course.

like image 117
Stephen M. Redd Avatar answered Sep 22 '22 03:09

Stephen M. Redd


asp:Panel will render as a DIV, check out this answer and see if it works

like image 36
roman m Avatar answered Sep 22 '22 03:09

roman m