locked
Making divs fit to screen width RRS feed

  • Question

  • User1510859543 posted

    We have a set of 4 div controls that we are creating additional label controls inside code-behind. Below is a sample of our 4 div controls, each showing the fixed first part of the controls inside the div.  We are creating label controls (spans) that are appended inside each div based on sales quantities by salesperson.  All works fine until the total width percents exceed 70-80% of the div and it extends the div to the next line of the page.  We don't want the variable # of labels to exceed the right side of the page.  I am pretty sure it is because we are calculating the width of each inserted label (span) to be a % of the target value using 100% as the max.  Also, since we have 260px already at the left of each row then we need to fill up to 100% of the remaining unused div space.  Below is out markup for the 4 div controls and a sample of how we are building one of them (weekly).

            <div id="PanelChartDay" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
                <asp:Label ID="LblDayTarget" runat="server" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblDay" runat="server" Text="Day" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblDayH" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblDayM" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblDayS" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblDayX" runat="server" CssClass="left" Width="40"></asp:Label>
            </div>
            <div id="PanelChartWeek" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
                <asp:Label ID="LblWeekTarget" runat="server" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblWeek" runat="server" Text="Week" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblWeekH" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblWeekM" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblWeekS" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblWeekX" runat="server" CssClass="left" Width="40"></asp:Label>
            </div>
            <div id="PanelChartMonth" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
                <asp:Label ID="LblMonthTarget" runat="server" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblMonth" runat="server" Text="Month" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblMonthH" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblMonthM" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblMonthS" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblMonthX" runat="server" CssClass="left" Width="40"></asp:Label>
            </div>
            <div id="PanelChartYear" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
                <asp:Label ID="LblYearTarget" runat="server" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblYear" runat="server" Text="Year" CssClass="left" Width="50"></asp:Label>
                <asp:Label ID="LblYearH" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblYearM" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblYearS" runat="server" CssClass="left" Width="40"></asp:Label>
                <asp:Label ID="LblYearX" runat="server" CssClass="left" Width="40"></asp:Label>
            </div>

    Page-behind code sample

                        Dim lblSoldDay As New Label()
                        Dim lblLostDay As New Label()
    
                        lblSoldDay.Text = intSales.ToString
                        lblSoldDay.Style("display") = "block"
                        dblPercent = (intSales / intDayTarget) * 100
                        If dblPercent < 1 Then
                            dblPercent = 1
                        End If
                        strWidth = CStr(dblPercent) & "%"
                        lblSoldDay.Style("width") = strWidth
                        PanelChartWeek.Controls.Add(lblSoldDay)
    

    Friday, February 3, 2017 6:24 PM

Answers

  • User1510859543 posted

    I changed the initial labels to % widths and now it works. Problem solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 6, 2017 1:19 PM

All replies

  • User-707554951 posted

    Hi dlchase,

    From your description, I am not clear what you want to do.

    Would you please provide your css and with more detailed and clear description?

    Best Regards

    Cathy

    Monday, February 6, 2017 10:02 AM
  • User1510859543 posted

    I changed the initial labels to % widths and now it works. Problem solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 6, 2017 1:19 PM