CODEWITHSUNDEEP
asp.nethtmllayoutuser-controlspanel
Hoang Lam
Hoang Lam

Reputation: 464

How to render usercontrols in asp:panel horizontally?

I have many usercontrols added to a asp:panel, but the controls render vertically with each new one below the previous one. How can I render the controls horizontally (with scrollbar if the controls' width exceeds the screen width)

Thank you in advance

Upvotes: 1

Views: 2801

Answers (3)

Ali.Rashidi
Ali.Rashidi

Reputation: 1462

as html parser renders user controls as an entire html element you should create a table with desired columns and rows and put your user controls inside td tags. if the count of your user controls are unknown and is decided by code at runtime, you should create an asp:table and add pre-defined table cells and rows.

hope that helps. regards.

<table style="width:100%;">
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC1" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC2" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC3" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC4" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC5" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC6" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC7" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC8" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC9" runat="server" />
        </td>
    </tr>
</table>

Upvotes: 0

KV Prajapati
KV Prajapati

Reputation: 94645

You may add each user control in table's cell horizontally or set/apply CSS display:inline attribute to the container of user-control.

Upvotes: 0

Saeed Neamati
Saeed Neamati

Reputation: 35832

ASP.NET Panel control usually renders to <div> element at client-side. You should add a class to it:

<asp:Panel CssClass='float-left'>

Then in CSS float them:

.float-left
{
   float: left;
}

Upvotes: 2

Related Questions