How to resize panels when changing browser size

Coreysan 1,651 Reputation points
2021-07-08T00:36:55.293+00:00

I wrote my first aspx app, and used bootstrap. I did the standard technique using container and row classes.
Here's a snippet:

<div class="container">
    <div class="row">
        <div class="col-lg-8" style="float: left;">
             <asp:Panel ID="Member_Panel" runat="server"></asp>
             .... bla bla....
        </div>
    </div>
</div>

It all looks great if the browser is maximized, but if I resize the browser with a smaller width, say, 992px, then the panels look awful and inherit bizzaar sizes.
Is there a way to lock the controls and sizes?
Or should I do it differently?

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,362 questions
{count} votes

Accepted answer
  1. Yijing Sun-MSFT 7,071 Reputation points
    2021-07-09T05:59:06.98+00:00

    Hi @CoreyFleg-6304,
    You have used container and grid.They are responsive. You shouldn't use fixed width.You need use relative width and height such as percent.
    You could use .container-fluid.This means 100 percent of the layout. And "col-lg-12" means you divided the content into 12 parts. And if you use 50% width of the textbox, the textbox' width will to be 50% of the content. And the percent is responsive.
    Best regards,
    Yijing Sun


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

3 additional answers

Sort by: Most helpful
  1. Yijing Sun-MSFT 7,071 Reputation points
    2021-07-08T03:43:31.277+00:00

    Hi @Coreysan ,
    Bootstrap is responsive by default. You could add meta tag and css. Just like this:
    112757-new-text-document-5.txt
    Best regards,
    Yijing Sun


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. Coreysan 1,651 Reputation points
    2021-07-08T16:07:36.393+00:00

    Thank you so much for your advice. Since I'm new to this, I am grateful to learn all I can.

    I included the meta tag for the viewport, and that helped. I'm using bootstrap 4.5.2, but I'm not using bootstrap-responsive.css.
    The screen looks better when resizing, so my only followup question is this:

    When I designed the main page at maximum size, I placed panels first, and then put textboxes inside the panels for both display and user input.
    To make it look nice, I hard-coded the width of the text boxes. So now, if I resize the browser, the panels will adjust in size, but the text boxes will not. They preserve
    the width I coded. Here's a snippet:

    <asp:Panel ID="Charges_Panel2" runat="server" width="50%">
       <div style="float: left; margin: 3px 10px 0 10px; width: 350px;">
          <asp:Label ID="lbl_Billed" runat="server" Text="Total Billed Charges:"></asp:Label>
          <asp:TextBox ID="txt_Billed" runat="server" CssClass="ShiftRight" Width="170px"></asp:TextBox>
       </div>
    </asp:Panel>
    

    What should I study or learn to make the textboxes adjust in size as well, if possible?

    0 comments No comments

  3. Coreysan 1,651 Reputation points
    2021-07-09T16:02:22.867+00:00

    Thank you! I was wondering about that! :)
    Okay - I'll get to work!
    COrey

    0 comments No comments