locked
Button Won't stay within DIV RRS feed

  • Question

  • User1769015664 posted

    When form is shrunk, all elements of DIV stay within but half the button moves outside.

    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
        <center>
            <div>
                <div class="row" style="border:dotted">
                    <div class="row" style="width:100%; height:25px; text-align:center; background-color:#E6AC00; color: #FFFFFF;">Upload Document</div>
                    
                    <div class="column" style="background-color:#aaa;">
                        <h2>File Uploader</h2>
                         <asp:Label ID="Label3" runat="server" Text="File " ForeColor="black" style="text-align:left"></asp:Label>
                        <asp:FileUpload ID="FileUpload2" ToolTip="select a file" 
                            runat="server" onchange="setDisable()"
                                BackColor="#1E5A8C" ForeColor="white" class="file-upload file-upload input" BorderStyle="Groove" Width="409px"/>
                        <br />
                        <asp:Label ID="Label4" runat="server" Text="Document Type " ForeColor="black" style="text-align:left"></asp:Label> 
                        <br />
                        <asp:DropDownList ID="DropDownList1" runat="server" Height="22px" Width="359px" onchange="selectChange()"></asp:DropDownList>
                        &nbsp;<br /><br /> 
                        <hr />
                        <asp:Button ID="Button1" runat="server" Text="Upload Files" OnClick="btnUpload_Click" BackColor="blue" ForeColor="white" />
                    </div>
                    <div class="column" style="background-color:#bbb;">
                    <h2>Existing Documents</h2>
                    </div>
    
                </div>
    
                <div style="border:double; align-content:inherit">
                    <br />
                </div>
    
                <div></div>
                    <asp:Label ID="Label5" runat="server" Text="" Visible="False"></asp:Label>
                <br /><br />
            </div>
        </center>
    </asp:Content>
    
        <style type="text/css">
            .button {
                  align-content:center;
                  Width:200px;
                  border: 3px outset navy;
                }
          #parent { 
              overflow: hidden 
              }
       </style>

    Tuesday, November 24, 2020 12:17 AM

All replies

  • User-189459990 posted

    I created a Web Form with master page and tested the code you provided. <o:p></o:p>

    But everything works fine. There is no "half the button moves outside" issue during the test.<o:p></o:p>

    Where did you set the “style”? And where did you define class “button” and id “parent”?<o:p></o:p>

    To reproduce the issue, could you provide more details?<o:p></o:p>

    Tuesday, November 24, 2020 9:42 AM
  • User1769015664 posted

    Style is not being used, please ignore it.

    Your screen doesn't have 2 columns, I have 'column' defined in DIV to produce 2 columns. The first column has 'File Uploader' and the second column has 'Existing Documents'

    <div class="column" .....

    Tuesday, November 24, 2020 3:26 PM
  • User-189459990 posted

    A workaround is that you can using percentage (%) for width.

    <asp:FileUpload ID="FileUpload2" ToolTip="select a file" 
        runat="server" ... Width="70%" CssClass="maxwidth"/>

    And set a "max-width css" for it.

    .maxwidth {
        max-width: 300px;
    }
    Wednesday, November 25, 2020 5:51 AM