Determining the maximum width with CSS by incorporating viewport width and the position on the

Is there a way to determine the max-width of an element in CSS based on the viewport width and the position of the element? I have a div that holds a table with variable column widths, so the size can change depending on the data. I want to set a maximum width for the container with a horizontal scroll using 100vw, but I also need to account for a sidebar that users can show or hide. I'm considering calculating the max-width as 

100vw - [left position of the container div]
, but I'm open to other suggestions for achieving this using only CSS.

cssresponsivecalc

Answer №1

Upon further investigation through online research, it appears that this feature is not officially supported.

To resolve the issue, I implemented a solution using the class applied to the body element when the sidebar is toggled. Given that the sidebar has a fixed width, I utilized the following CSS code:

body{
    div.horizontal-scroll {
        max-width: calc(100vw - 310px);
    }
    &.sidebar-hidden {
        div.horizontal-scroll {
            max-width: calc(100vw - 80px);
        }
    }
}

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

Message within the boundary of the input field

Click here to view the image It would be great to have the text "text name" displayed on the border of the input box. Here is the HTML code - <input type="text" id="text creator" class="form-control" placeholder="text creator" na ...

htmlcssangularborder

No matter how tall I make it, the scroll bar just won't stop showing

Check out this fiddle for more information: http://jsfiddle.net/LAueQ/ Even after increasing the height of the campaignDiv div, the scrollbar keeps showing up. If possible, I would like to avoid using overflow: hidden. ...

htmlcss

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

javascriptjqueryhtmlcss

Using two body tags in the code of a Wordpress site can lead to malfunctioning

I've encountered a strange issue with my Wordpress sites hosted on BlueHost. There seems to be a double <head> tag appearing in the HTML code, even though there is only one. This duplicate tag is causing issues with the proper rendering of the s ...

phphtmlcsswordpresstags

Identifying line breaks caused by browsers or CSS forced line breaks

<p style="width:60px"> This is just a sample text. It is a piece of text that doesn't really say anything meaningful.</p> When this text is rendered as HTML, it would look like this: This is just a sample text. It is a piece of text ...

javascripthtmlcsspdf-generation

Real-time update of quiz results based on varying factors

In my quiz, I have set up variables that start at 0 and increase based on certain conditions. One variable should increase when a question is answered correctly, while the other should increase when a question is answered incorrectly. If you answer a quest ...

javascriptjqueryhtmlcss

Using JQuery datepicker() with CSS class in ASP.net for dynamically generated TemplateFields

I have implemented TemplateFields in a Gridview to dynamically create textboxes as records are added. However, due to the limitation of not being able to have ASP controls with the same ID's, using ClientIDMode=Static is not an option for these contro ...

javascriptjquerycssasp.netdatepicker

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

javascriptjqueryhtmlcssinternet-explorer

When using mobile browsers and the screen width is at its maximum

I am in desperate need of help with this issue, can someone please provide guidance? I am currently working on optimizing a webpage for mobile devices using CSS media queries. In the <head> section, I have included the following: <meta name="Ha ...

cssresponsive-designmedia-queries

Issues with Bootstrap sidebar and footer functionality

I need to implement a consistent footer on multiple web pages created with jQuery and bootstrap 3. Following the example provided by Bootstrap, I have written the script below to add the footer: // Default $( document ).ready(function() { $(' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to identify and differentiate various checkboxes using HTML and CSS

I am currently working on implementing a thumbs-up and thumbs-down feature, where clicking on the thumb-up icon will change the color to green, and clicking on the thumb-down icon will change it to red. However, I am facing some difficulties understanding ...

htmlcsscheckboxrating-system

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

jqueryhtmlcss

Tips for adjusting the size of your logo for the mobile edition of your WordPress site

I have been attempting to adjust the size of our website's logo ( ) for mobile viewing, but so far no code has proved effective. I've tested various iterations like the one below without success: @media (max-width: 360px) { .site-branding ...

jqueryhtmlcsswordpress

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

What strategies can I employ to prevent this bar from breaking?

How can I prevent my navigation bar from breaking when zoomed out? Below is the code snippet in question: <nav> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">What We Do</a></li> &l ...

htmlcss

What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em: The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font p ...

htmlcssfont-size

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

What is the best way to position a div as a footer within a larger main div?

I am aiming to create a div with simple header, content, and footer sections. Here is the design I am trying to achieve: https://i.stack.imgur.com/QfnGa.png You can check out my code on jsfiddle. I'm having trouble understanding how the relative lay ...

htmlcss

Avoid relying on automated CSS generation

In my _layout.scss file, I have the SCSS code snippet below: .wrap { display: flex; flex-wrap: wrap; } After compilation, the above SCSS is automatically transformed to the following CSS. However, I want to exclude the (display: -webkit-box;) pro ...

csssass

Styling circles and text side by side with CSS

Hey there, I'm trying to create a CSS circle with text aligned to the right alongside it. Here's the code I've been using: <div class="circlearancione">Disponibile</div> .circlearancione{ background-color: red; border-c ...

cssalignmentshapesgeometrytext-alignment