locked
WEB UserControl with fixed Size RRS feed

  • Question

  • User-1046111435 posted

    Hello,

    i want to generate a UserControl dynamicly.

    With this code the controls are generated, but in the vertical direction

    when i replace myControl with for example a button it works, but why?

    what am I doing wrong?

    Thanks,

    Markus

    Code from UserControl

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlOverview.ascx.cs" Inherits="WebApplication1.WebUserControlOverview"%>
    <div style="width: 200px; height: 300px">
        <asp:Panel ID="Panel1" runat="server" BackColor="WhiteSmoke" ScrollBars="Auto" Width =" 195" Height="295">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
                    </asp:Timer>
                    <asp:Label ID="lblAnlage" runat="server" Text="Anlage" Width="100px"></asp:Label>
                    <br />
                    <br />
                    <asp:Label runat="server" Text="Vorlauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselVorlaufIst" runat="server" Text="30.5"></asp:Label>
                    <asp:Label runat="server" Text="Rücklauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselRuecklaufIst" runat="server" Text="20.5"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
    </div>

    Code from my WebForm1

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    <%@ Reference Control="~/WebUserControlOverview.ascx" %>
    <%@ Register src="WebUserControlOverview.ascx" tagname="WebUserControlOverview" tagprefix="uc1" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title> Anlagenübersicht</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="font-family:Arial">
                <table>
                    <tr>
                        <td colspan="5">
                            <h3>Anlagenübersicht</h3>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="30">
                            <asp:PlaceHolder runat="server" ID="panelAnlagen"></asp:PlaceHolder>
                        </td>
                    </tr>
                </table>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
               
                </div>
        </form>
    </body>
    </html>

    Code behind from my WebForm1Page

       public partial class WebForm1 : System.Web.UI.Page
        {
            private WebUserControlOverview userControlOverview;
    
            protected void Page_Load(object sender, EventArgs e)
            {
                for (int i = 0; i < 600; i++)
                {
                    userControlOverview = (WebUserControlOverview)LoadControl("~/WebUserControlOverview.ascx");
                    userControlOverview.ID = i.ToString();
                    userControlOverview.Val = listKessel[i];
                    panelAnlagen.Controls.Add(userControlOverview);
                    //Button btn = new Button();
                    //btn.Text = "Button " + i.ToString();
                    //panelAnlagen.Controls.Add(btn);
                }
            } 
        }
    Monday, September 10, 2018 9:11 AM

Answers

  • User-893317190 posted

    Hi WimmerM,

    If you know the  property display , you could understand why this happens, it is a problem about css.

    You should know the difference between  display:block  display:inline-block and display: inline.

    display:block means the element could have width and height and occupy  the entire line even though the width of it  is not bigger than the line. For example,div is such an element.

    display:inline-block  means the element could have width and height and height but it doesn't occupy the entire line. For example, img is such an element.

    display:inline means the element doesn't has own width and height ,the width and height depend on the content of it. For example , span is such an element.

    So , if you want  the div not to occupy the entire, please change the display property of it.

    For more information about  display , please refer to https://www.w3schools.com/cssref/pr_class_display.asp

    Below is my code.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlOverview.ascx.cs" Inherits="MyWebFormCases.ExtraControls.WebUserControlOverview" %>
    <div style="width:200px;height:300px;display:inline-block" >
    <asp:Panel ID="Panel1" runat="server" BackColor="WhiteSmoke" ScrollBars="Auto" Width ="195" Height="295" >
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" >
                    </asp:Timer>
                    <asp:Label ID="lblAnlage" runat="server" Text="Anlage" Width="100px"></asp:Label>
                    <br />
                    <br />
                    <asp:Label runat="server" Text="Vorlauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselVorlaufIst" runat="server" Text="30.5"></asp:Label>
                    <asp:Label runat="server" Text="Rücklauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselRuecklaufIst" runat="server" Text="20.5"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
    </div>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 11, 2018 2:12 AM

All replies

  • User-893317190 posted

    Hi WimmerM,

    If you know the  property display , you could understand why this happens, it is a problem about css.

    You should know the difference between  display:block  display:inline-block and display: inline.

    display:block means the element could have width and height and occupy  the entire line even though the width of it  is not bigger than the line. For example,div is such an element.

    display:inline-block  means the element could have width and height and height but it doesn't occupy the entire line. For example, img is such an element.

    display:inline means the element doesn't has own width and height ,the width and height depend on the content of it. For example , span is such an element.

    So , if you want  the div not to occupy the entire, please change the display property of it.

    For more information about  display , please refer to https://www.w3schools.com/cssref/pr_class_display.asp

    Below is my code.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlOverview.ascx.cs" Inherits="MyWebFormCases.ExtraControls.WebUserControlOverview" %>
    <div style="width:200px;height:300px;display:inline-block" >
    <asp:Panel ID="Panel1" runat="server" BackColor="WhiteSmoke" ScrollBars="Auto" Width ="195" Height="295" >
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" >
                    </asp:Timer>
                    <asp:Label ID="lblAnlage" runat="server" Text="Anlage" Width="100px"></asp:Label>
                    <br />
                    <br />
                    <asp:Label runat="server" Text="Vorlauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselVorlaufIst" runat="server" Text="30.5"></asp:Label>
                    <asp:Label runat="server" Text="Rücklauf" Width="100"></asp:Label>
                    <asp:Label ID="LabelKesselRuecklaufIst" runat="server" Text="20.5"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
    </div>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 11, 2018 2:12 AM
  • User-1046111435 posted

    Thanks!

    Markus

    Tuesday, September 11, 2018 11:56 AM