Panel grid extending beyond the boundaries of its container wrapper

I am currently working on a web application using asp.net. I have encountered a major issue where the gridpanel in my form overflows the wrapper container when the browser is resized. You can view the webapplication here.

If you resize your browser or change the resolution, you will notice that the gridpanel extends beyond the container. What could be causing this problem? Below are the CSS snippets:

Master Page CSS:

body {
    background-color: #658A07;
}

#container {
    background-color: #F4FAE1;
    height: 100%;
    width: 90%;
    margin: 0px auto;
    border: 1px solid #B8C97F;
}

#left {
    float: left;
    width: 304px;
    background-color: #F4FAE1;
    height: 100%;
    border-right: solid;
    border-right-width: 1px;
    border-right-color: #B8C97F;

}
...

CSS for Gridpanel and Form Contents:

html, body, table, tr, td, h1, h2, h3, h4, h5, input, select, p, textarea {
    margin: 0px;
    padding: 0px;
    font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Open Sans', open-sans, 'Source Sans Pro', MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', 'Lucida Grande', 'Droid Sans', Ubuntu, sans-serif;
}
...

Any idea what might be causing this issue?

Answer №1

The table is contained within the following DIV:

<div id="GridPanel" style="width: 1563px; overflow: auto;">

A fixed inline css width of 1563px is set, and on line 506 in Main.css, there are declarations for max-width: 760px; and min-width: 400px;. Since the width exceeds the max-width value, the element will be constrained by the max-width without using the min-width.

To allow the element to resize based on the screen size and adhere to the min-width value, use a percentage unit for setting the width instead of pixels.

Example:

<div id="GridPanel" style="width: 95%; overflow: auto;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in onchange event due to incorrect index variable

My goal is to add onchange events to select tags within a div that contains multiple tags. To achieve this, I am using a for loop to attach events to each tag. The purpose of these events is to update a select tag in another container by removing the "disa ...

PHP array is not displaying properly in two dimensions

Looking at the array of dates and places, I need to figure out how to properly format this information for display. Here is an example of what I am trying to achieve: 20140411 Basingstoke Salisbury 20140405 Basingstoke 20140419 Salisbury ...and ...

Navigate to a designated file path on my computer by incorporating either an anchor tag or an input tag

One of my objectives is to create a link or button that, when clicked, will open a specific location on my computer. I am unable to utilize jQuery for this task but can use JavaScript. I attempted to achieve this by using an input tag with the following c ...

The number of contents determines the dynamic CSS border style

Could you please assist me in identifying what this design element is called? I have tried searching on Google, but had no luck finding exactly what I am looking for. Here is an example of the look I am aiming for: https://i.sstatic.net/AXUvq.jpg Can so ...

Tips for activating the next tab using the <a> or <button> element in Materialize:

<div class="col s12"> <ul class="tabs"> <li class="tab col s4"><a href="#test1" class="active">tab1</a></li> <li class="tab col s4"><a href="#test2">tab2</a></li> <li class="tab c ...

A guide on clearing SQL session state for all users in ASP.NET

In my ASP.NET application, I am using SQLServer SessionState mode to store session data. This includes serialized/deserialized objects that are accessed regularly. When I update the code structure of these objects and deploy a new version, users who are a ...

Utilize Python and Selenium to extract a URL from HTML code

While seeking assistance with a dropdown menu in a table, I came across this problem. The issue at hand involves fetching the URL from the source code snippet below: <a href="#" onclick="window.open('/consultas/util/pdf.php?type=rdd ...

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

Tips for choosing multiple checkboxes at onceWould you like to learn

I am looking to retrieve all the values of checkboxes with the same id. <select name="marked" id="mark" onchange="checkdata()"> <option value="">SELECT</option> <option value="all">ALL</option> <opt ...

What is the best way to create a Google-like style for the HTML <option> tag?

Can anyone demonstrate how to create fields for birthday and gender like the ones on the gmail sign up page? Your help is appreciated. Thank you! ...

How come the fa-heart-o icon is not functioning properly in Fontawesome version 5?

How can I use the fa-heart-o icon in Fontawesome 5 free version if it's not working? Can I have both version 4.7 and 5.1 of Fontawesome on the same page? It seems to work in version 4.7. This is the code I'm using: <!DOCTYPE html> &l ...

Finding a particular sequence of characters and extracting information that comes after it

A while back, I created a website and now I'm looking to transfer the data into a database without manually copying and pasting the 400+ pages it has accumulated. This way, I can transform the site into a database-driven platform. Each page on my sit ...

Struggling to implement AutoMapper with the POST action in a RESTful API

I'm currently working on implementing AutoMapper in the post route handler of my simple RESTful API: [HttpPost] [Route("[action]")] public async Task<IActionResult> CreateHotel([FromBody]Hotel hotelCreateDto) { ...

Download a PDF file and store it in the Downloads directory using ASP .NET MVC

Within my controller method, I am utilizing the following code to save a PDF. HtmlDocument doc = new HtmlDocument(); doc.LoadHtml(htmlContent); HtmlNode node = doc.GetElementbyId("DetailsToPDF"); HtmlToPdfConverter html ...

Guidelines for ensuring that a radio button must be chosen prior to submission

I'm struggling with implementing AngularJS validation for a set of questions with radio answer choices. I want to ensure that the user selects an answer before moving on to the next question by clicking "Next". Check out my code below: EDIT: Please k ...

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

Align the body of the table with the header after populating the table with values

Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...

What is the best way to access Sass variables in a different Sass file?

I'm currently working on a WordPress theme and running into an issue with utilizing SASS from another file using the @use method. For those of you who may not know, the @import rule method will soon be deprecated which is why I am trying to implement ...

Show different text in a paragraph based on the selected value from a dropdown menu in Contact Form

Referenced in this discussion, I have implemented a dropdown menu that displays the selected value in the subsequent question on the form. Now, I aim to have another question display different text based on the chosen value from the dropdown menu. Here is ...

Remove the cookie on the first day of every month

Can I set up a script to automatically delete a cookie at the beginning of each month, instead of relying on the cookie's expiration date? My goal is to show a specific message to users once a month, regardless of how often they visit the site. The we ...