Button Won't stay within DIV RSS

• • Reply
  NJ2

  Member

  75 Points

  466 Posts

  Button Won't stay within DIV

  Nov 24, 2020 12:17 AM|NJ2|LINK

  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>

• • Reply
  kyle0418

  Member

  40 Points

  17 Posts

  Re: Button Won't stay within DIV

  Nov 24, 2020 09:42 AM|kyle0418|LINK

  I created a Web Form with master page and tested the code you provided.

  But everything works fine. There is no "half the button moves outside" issue during the test.

  

  Where did you set the “style”? And where did you define class “button” and id “parent”?

  To reproduce the issue, could you provide more details?

• • Reply
  NJ2

  Member

  75 Points

  466 Posts

  Re: Button Won't stay within DIV

  Nov 24, 2020 03:26 PM|NJ2|LINK

  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" .....

• • Reply
  kyle0418

  Member

  40 Points

  17 Posts

  Re: Button Won't stay within DIV

  Nov 25, 2020 05:51 AM|kyle0418|LINK

  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;
  }