The panel's placement shifts when the browser window is expanded

Currently, the issue I am encountering involves an ASP.NET website with a header, sidebar, and additional right sidebar. When I resize the browser window, the left sidebar overlaps the content page, resulting in mixed-up controls. Please refer to the image for a better understanding.

Furthermore, there is a problem when I run the website on a wide screen resolution as the controls (panels) have a larger margin, making everything appear wider.

Any suggestions on how to resolve this issue would be greatly appreciated. Thank you in advance.

EDIT:

CSS code for the side panel (right):

#droite
{
    position: fixed;
    top: 22.5em;
    right: 5%;
    width: 13%;
    background-color: White;
}
htmlcssasp.net

Answer №1

One of the changes I made to my website at firedrake969.github.io was implementing a bit of jQuery code that automatically hides the sidebar when the browser window is resized to a smaller size. If you're open to using jQuery, I highly recommend this approach. However, if you prefer not to use jQuery, achieving the same effect just with CSS/HTML using position:fixed might prove challenging when the browser window is too small.

Answer №2

If you're looking to achieve something similar, you may want to consider the following code. Adjust the max-width to suit your desired screen width.

 @media screen and (max-width:768px) {
        #right-section
        {
            position: fixed;
            top: 22.5em;
            left:5%;
            width: 100%;
            background-color: White;
        }
    }

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

Fetching Data Tables via Ajax Request

I'm attempting to retrieve data from a database using Jquery DataTable, but I keep encountering this error message: "DataTables warning: table id=tblBindData - Cannot reinitialise DataTable." function BindData() { $("#tblBindData").DataTab ...

c#jqueryasp.netajax

Here's a way to programmatically append the same icon to multiple li elements generated using document.createElement:

I am new to creating a to-do app and need some guidance. When a user enters a task, I successfully create a list item for that task. However, I am unsure how to add a delete icon next to the newly created li element. Can someone please help me out? Below ...

javascripthtmlcss

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

javascriptjqueryhtmlcss

Add a picture and adjust its size as needed

Currently facing an issue where I am attempting to upload an image and display it on screen in a draggable and resizable manner. Utilizing jquery for the draggable and resizable functionalities, the problem lies in the fact that the draggable function is f ...

javascriptjqueryhtml

Creating dynamic form groups that allow for the addition and removal of forms while assigning unique identifiers and names to each input field

I am currently immersed in the development of a sophisticated CMS system. My main objective is to dynamically add and remove form inputs using JavaScript upon clicking a button, with the ultimate goal of submitting the data into a database via PHP script. ...

javascriptphpjqueryhtmltwitter-bootstrap

What is the process for deserializing child components within a list?

After retrieving data from the database, I am faced with extracting the BusPersonals values efficiently. Dealing with numerous fields in BusPersonals can be quite daunting. Is there a way to streamline this process without resorting to using autoMapper? p ...

c#asp.netjsonasp.net-core

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

Dropdown does not populate with data

HTML content <select class="form-control" tabindex="-1" id="superId" name="superId[]" multiple="multiple" required="required" data-bind="options: SupArray, optionsText: ' ...

javascriptjqueryhtmlajaxknockout.js

What could be causing the malfunction in my 'sort' function? I have thoroughly checked for errors but I am unable to locate any

Exploring the world of JavaScript objects to enhance my understanding of functions and object manipulation. I have created a program that constructs an Array of Objects, each representing a person's 'firstName', 'middleName', and & ...

javascripthtmlarrayssortingobject

Handling Exceptions in Parallel Programming with HttpWebRequest

I am looking to implement parallel programming that includes exception handling. public List<ExcelRecord> GetReport(List<ExcelRecord> records, string type) { foreach (ExcelRecord rec in records) { ...

c#asp.net.nethttpwebrequesttask-parallel-library

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Issues with the card display within a Bootstrap carousel

Having encountered challenges with displaying cards in a bootstrap carousel, I am seeking assistance. To view my current (incomplete) project, please refer to the CodePen link below. https://codepen.io/robbiecorcoran/pen/eYMVvEN <!-- SEEKING ASSISTANCE ...

htmlcsscarouselbootstrap-5card

Safari's Styling Struggles

I've been diligently working on a website for some time now, conducting the majority of my testing in Chrome, Firefox, and IE. However, as I near completion, I've run into an issue when viewing the site in Safari on Mac, iPad, and iPhone. I' ...

csslayoutmobilesafaristyling

Javascript Code for toggling the visibility of a panel

I need help with a JavaScript code that can show or hide a panel depending on the data in a grid. If the grid has data, the panel should be displayed, but if the grid is empty, the panel should be hidden. I attempted to use the following code, but it did ...

c#javascriptasp.net

Create a list of items that are enclosed within a parent element

My menu is generated from a php query and the output is as follows: #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; ...

htmlcss

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

Utilizing PHP to dynamically load HTML forms and leveraging JQuery for form submissions

I am currently facing a dilemma that I am unsure how to approach. It seems that JQuery requires unique ID's in order to be called in the document ready function. I use PHP to read my MySQL table and print out HTML forms, each with a button that adds a ...

javascriptphpjqueryhtmlmysql

What Causes Error 500 in IIS 7.5 Integrated Mode when Using Custom Asynchronous HTTP Handlers?

I recently completed a long-polling project using ASP.Net. The client side initiates an XMLHttpRequest for either "any.orders" or "any.prices". Within this setup, I have implemented asynchronous custom http handlers that handle the request, subscribe to i ...

c#asp.netiisasynchronoushttphandler

Can you explain the functionality of $on.constructor in AngularJS?

Recently, I attempted an XSS challenge on the PortSwigger labs website. You can find the challenge here. This is my solution to the XSS challenge: {{$on.constructor('alert(1)')()}} However, since I have no prior experience with AngularJS, I&apo ...

javascripthtmlangularjsframeworksxss

A guide on styling JSON key values within HTML

I need help organizing my JSON Document on an HTML page. Here is the JavaScript code I am using: xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Optionally, here you can update ...

javascripthtmljson