I am developing ASP.NET application. sometimes user, resizing the width of the page. most of the global page (like microsoft all the pages), the page automatically fit the width based on the size of the horizontal width. How to make this. by default, the page width will be setting within the size of the page. The above image, vertical only scrolling has come. but, there is no horizontal scroll bar and it will be resize the page automatically based on user resizing the page

Hi @ Gani_tpt The above image, vertical only scrolling has come. This vertical scrolling is native to the browser itself. If you want to automatically resize the page, you need to provide code. There are multiple ways to implement this functionality, and we'll need to provide a workaround for your code.Here are two methods you can refer to: JavaScript <script> $(document).ready(function () { // Wait for the HTML to finish loading. var resize = function () { var height = $(window).height(); // Get the height of the browser window area. var width = $(window).width(); var element = $("body"); // Find the element to resize. element.height(height); element.width(width); // Set the element's height. } resize(); $(window).bind("resize", resize); }); </script> Using media queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries @media only screen and (max-width: 600px) { /* Styles here only apply if the browser window has min-width 600px */ body { background-color: lightblue; } } width: 50% instead of using in css say "width: 200px", use stuff like "width: 50%" This makes it use 50% of whatever it's in, so in the case of: <body> <div style="width:50%">  </div> </body> The div will now always take up half the window horizontaly. Best regards, Lan Huang If the answer is the right solution, please click " Accept Answer " and kindly upvote it. If you have extra questions about this answer, please click " Comment ". 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.

How to make fit ASP.NET page in horizontal bar when resizing the width of the page manually

Accepted answer

Lan Huang-MSFT 27,796 Reputation points Microsoft Vendor

2024-05-27T05:32:30.48+00:00
Hi @Gani_tpt

The above image, vertical only scrolling has come.

This vertical scrolling is native to the browser itself. If you want to automatically resize the page, you need to provide code. There are multiple ways to implement this functionality, and we'll need to provide a workaround for your code.Here are two methods you can refer to:

JavaScript

<script> $(document).ready(function () { // Wait for the HTML to finish loading. var resize = function () { var height = $(window).height(); // Get the height of the browser window area. var width = $(window).width(); var element = $("body"); // Find the element to resize. element.height(height); element.width(width); // Set the element's height. } resize(); $(window).bind("resize", resize); }); </script>

Using media queries

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

@media only screen and (max-width: 600px) { /* Styles here only apply if the browser window has min-width 600px */ body { background-color: lightblue; } }

width: 50%

instead of using in css say "width: 200px", use stuff like "width: 50%"

This makes it use 50% of whatever it's in, so in the case of:

<body> <div style="width:50%">  </div> </body>

The div will now always take up half the window horizontaly.
Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.
Please sign in to rate this answer.
Gani_tpt 2,026 Reputation points

2024-05-28T17:50:44.02+00:00

Hi @Lan Huang-MSFT ,

pls. find below screenshot for reference.

i did some sample testing as below.

code is the same. But, when i am resizing the web page and after that the relative position have not been fit in the page.

Picture :1

Picture : 2

How it is possible...?

Gani_tpt 2,026 Reputation points

2024-05-28T17:51:11.3833333+00:00

pls. update.

Bruce (SqlWork.com) 59,051 Reputation points

2024-05-28T20:19:00.2766667+00:00

you need understand how percentage units are calculated. your css is using box model. the width is the content, not including padding and border:

https://www.w3schools.com/css/css_boxmodel.asp

in picture one, you define a relative div using box model. lets say the screen 100px wide:

width: 90% = 90 px wide (100px *90%)

border: 3px = div now 96 px wide

left: 30 px. = move div right 30px

so the only left 70px of the 96px is visible, thus the scrollbar.

a responsive design would use all percents or calc the width

<style> div.relative { position: relative; left: 30%; border: 3px solid #73AD21; height: 150px; width: calc(70% - 6px); } div.absolute { position: absolute; top 16px; left: 30%; border: 3px solid #73AD21; height: 100px; width: calc(70% - 6px); } </style>

you can also switch to set the box sizing so the width includes the border and padding. so its:

<style> div.relative { position: relative; left: 30%; border: 3px solid #73AD21; height: 150px; width: 70%; box-sizing: border-box; } div.absolute { position: absolute; top 16px; left: 30%; border: 3px solid #73AD21; height: 100px; width: 70%; box-sizing: border-box; } </style>

but for responsive design you should be using flex box.

Gani_tpt 2,026 Reputation points

2024-05-29T06:30:40.49+00:00

Hi @Bruce (SqlWork.com),

Thanks for your reply.

It's perfect...

Lan Huang-MSFT 27,796 Reputation points Microsoft Vendor

2024-05-29T06:41:53.8766667+00:00

Hi @Gani_tpt

It's perfect...

It looks like your issue has been resolved. Do you have any further questions about this post?

Gani_tpt 2,026 Reputation points

2024-05-29T07:32:21.86+00:00

Hi @Lan Huang-MSFT ,

Thanks for your reply... Thanks for @Bruce (SqlWork.com) also for the different solution.

It's working fine..
Sign in to comment

Share via

How to make fit ASP.NET page in horizontal bar when resizing the width of the page manually

0 additional answers