The issue of Bootstrap 4 fixed position not working with inherited width

Question

The issue of Bootstrap 4 fixed position not working with inherited width

Exploring content and sidebar:

.border {
   border: 1px solid black;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="app">
       <div class="container">
           <div class="row">
              <div class="col-md-7 col-lg-9 border">
                <div class="content">
                  .....
                  </div>
              </div>
              <div class="col-md-5 col-lg-3 border position-relative">
                 <div class="position-fixed border" style="    width: inherit;">
                   .....
                 </div>
              
              </div>
           </div>
           
       </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Trying to figure out why the width of the position-fixed element is not inheriting from its parent in this scenario. Any insights on how to make it inherit the width from the parent element would be much appreciated. If I set width: 20%, it does work for the position-fixed element, but why is inherit width not functioning properly?

css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Things are functioning correctly, however, it is important to remember that when using position:fixed, the width is relative to the viewport. This means that if you set 20% to the parent element, the fixed element will inherit that 20% and not the actual computed pixel value of its parent's width.

Therefore, both elements will have 20%, but the percentage references may not be the same for both (i.e. they may not share the same containing block).

The CSS keyword inherit instructs the specified element to inherit the computed value of a property from its parent element. ^source

... However, for certain properties (such as width, margin-right, text-indent, and top), percentage values specified become percentage-computed values. ^source

Let's demonstrate this with a simple example:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
  left:0;
}

body {
  padding:0 100px;
}

<div class="box">
  <div></div>
</div>

In this example, both elements have width:100%. The fixed element has 100% width of the viewport, while the static element has 100% of the body width minus padding.

An element's position and size can be calculated relative to a certain rectangle, known as the containing block of the element. The containing block is defined as follows:

...

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

If the element has 'position: fixed', the containing block is established by the viewport in continuous media or the page area in paged media. ^source

Another point to consider is the absence of a left value in your code, which can be misleading and cause overflow issues. Here is the previous code without the left value:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
}

body {
  padding-left:100px;
}

<div class="box">
  <div></div>
</div>

It may seem like the fixed element has the same width as the static one, but in reality, the fixed element is actually overflowing.

Related: Why aren't my absolutely-positioned elements located where I expect?

Answer 2

Things are functioning correctly, however, it is important to remember that when using position:fixed, the width is relative to the viewport. This means that if you set 20% to the parent element, the fixed element will inherit that 20% and not the actual computed pixel value of its parent's width.

Therefore, both elements will have 20%, but the percentage references may not be the same for both (i.e. they may not share the same containing block).

The CSS keyword inherit instructs the specified element to inherit the computed value of a property from its parent element. ^source

... However, for certain properties (such as width, margin-right, text-indent, and top), percentage values specified become percentage-computed values. ^source

Let's demonstrate this with a simple example:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
  left:0;
}

body {
  padding:0 100px;
}

<div class="box">
  <div></div>
</div>

In this example, both elements have width:100%. The fixed element has 100% width of the viewport, while the static element has 100% of the body width minus padding.

An element's position and size can be calculated relative to a certain rectangle, known as the containing block of the element. The containing block is defined as follows:

...

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

If the element has 'position: fixed', the containing block is established by the viewport in continuous media or the page area in paged media. ^source

Another point to consider is the absence of a left value in your code, which can be misleading and cause overflow issues. Here is the previous code without the left value:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
}

body {
  padding-left:100px;
}

<div class="box">
  <div></div>
</div>

It may seem like the fixed element has the same width as the static one, but in reality, the fixed element is actually overflowing.

Related: Why aren't my absolutely-positioned elements located where I expect?

Answer 3

Answer №2

When determining the percentage of a desired column to be fixed, I calculate it and then apply it to the CSS by setting the width percentage. For instance, if I want the fixed element to be equivalent to col-md-2, this would mean setting the width in the CSS to 2/12 = 16% !important; as shown below:

.fixedelement{width:16% !important;}

Answer 4

When determining the percentage of a desired column to be fixed, I calculate it and then apply it to the CSS by setting the width percentage. For instance, if I want the fixed element to be equivalent to col-md-2, this would mean setting the width in the CSS to 2/12 = 16% !important; as shown below:

.fixedelement{width:16% !important;}

The issue of Bootstrap 4 fixed position not working with inherited width

Answer №1

Answer №2

Similar questions

Setting the child elements of a CSS div to have the same width and be larger than the

What is the best way to target CSS only to elements that do not have a parent with a specific class?

What's the best way to continuously increase my counter using the data received from my AJAX calls?

Issue with Bootstrap 'align-content-around' not functioning as expected

Using JavaFX to create a StackedAreaChart and implementing the setLowerBound method

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

Is there a way to create a table cell that occupies zero space?

Determining the true width of a span element using jQuery

Tips for inserting an image within a horizontal list of items

What is the best way to insert an HTML data attribute string into a SCSS mixin using attr()?

Angular.js, require.js, and jQuery Plugin all combined to create a uniquely customized directive

Adjusting the width of an element by modifying its border-collapse property

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

Properly extending the functionality of an HTML widget

Encountering an issue with retrieving the nth element using Python Selenium

Exploring the world of sass with compound mathematical statements

Adjusting text alignment to span the entire width with consistent automatic spacing

Merge jQuery with the jetpack infinite scroll feature

Issue with printing error messages for JavaScript form validation

Using Jquery for conditional statements: if versus else