What could be causing the 'position: sticky' feature to fail when using Core UI's Bootstrap CSS?

Question

What could be causing the 'position: sticky' feature to fail when using Core UI's Bootstrap CSS?

I am currently in the process of constructing a react dashboard using Core UI's react template, which can be accessed here.

CSS

.top-stick {
    position: sticky !important;
    position: -webkit-sticky;
    top: 5rem;
    overflow-y: auto;
    height: calc(100vh - 5rem);
}

JSX

<div className="animated fadeIn">
  <Row className="app-scrollable-body">
    <Col xs="12" sm="4" md="3" className="top-stick">
      <Card className="toic">
        <CardBody>
          Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
    <Col xs="12" sm="8" md="9">
      <Card>
        <CardHeader>Card title</CardHeader>
        <CardBody>
        Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
  </Row>
  <div className="app-fixed-footer">
    <span>
      <a href="https://coreui.io">CoreUI</a> &copy; 2018
      creativeLabs.
    </span>
    <span className="ml-auto">
      Powered by{" "}
      <a href="https://coreui.io/react">CoreUI for React</a>
    </span>
  </div>
</div>

However, I have encountered an issue where the card does not stay sticky upon scrolling.

After checking the styles in the CSS, it appears to be correct. Additionally, there is no overflow: hidden in the CSS Tree.

https://i.sstatic.net/2iQA2.png

html css jsx sticky core-ui

Answer 1

Answer №1

The main issue arises from the presence of overflow within the .app-body element. This situation is a bit complex, but it's crucial to ensure that no element between the scrollable element and the sticky element has an overflow property set.

To better demonstrate this concept, consider the following example. The scrolling occurs in the viewport, while the wrapper contains overflow:hidden or even

auto</code), resulting in the sticky behavior not functioning as intended.</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.container {
  display:flex;
  align-items:flex-start;
  border:2px solid green;
}
.content {
  flex:1;
  height:200vh;
  background:red;
  margin:10px;
}
.sticky {
  flex:1;
  height:100px;
  background:blue;
  margin:10px;
  position:sticky;
  top:0;
}

.wrapper {
  overflow:hidden;
  border:2px solid red;
}

<div class="wrapper">
  <div class="container">
    <div class="sticky"></div>
    <div class="content"></div>
  </div>
</div>

Answer 2

The main issue arises from the presence of overflow within the .app-body element. This situation is a bit complex, but it's crucial to ensure that no element between the scrollable element and the sticky element has an overflow property set.

To better demonstrate this concept, consider the following example. The scrolling occurs in the viewport, while the wrapper contains overflow:hidden or even

auto</code), resulting in the sticky behavior not functioning as intended.</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.container {
  display:flex;
  align-items:flex-start;
  border:2px solid green;
}
.content {
  flex:1;
  height:200vh;
  background:red;
  margin:10px;
}
.sticky {
  flex:1;
  height:100px;
  background:blue;
  margin:10px;
  position:sticky;
  top:0;
}

.wrapper {
  overflow:hidden;
  border:2px solid red;
}

<div class="wrapper">
  <div class="container">
    <div class="sticky"></div>
    <div class="content"></div>
  </div>
</div>

What could be causing the 'position: sticky' feature to fail when using Core UI's Bootstrap CSS?

Answer №1

Similar questions

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

Creating a sleek animation with JQuery for a dynamic-width div

What is the process for including echo HTML field in the WooCommerce order view?

Can a sophisticated text editor be utilized without a content management system?

Pull in content or data from a separate page by leveraging AJAX

Centering a floating div in IE causes issues

Creating a custom Jquery function to generate a Div element instead of a Textbox in your web application

I want to create a form with two dropdown menus placed side by side within a parent DIV, and I want them to collectively occupy the entire width using Bootstrap

Taking data input from three textboxes and storing them in a PHP array

Concealed Button in Javascript

An alternative to Beautiful Soup for Python 3.2

Eliminate border-radius property from Bootstrap 4 breadcrumb using Sass styling

Uploading a File to a Remote WCF Service via jQuery AJAX on Different Domains

When the app is started before turning on Cordova geolocation, the geolocation feature fails to work

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

What is the reason that adding bottom padding and margins is ineffective in creating vertical space between these links?

Tips for enabling only a single div to expand when the "read more" button is clicked

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

When resizing the window, the width change in JQuery always resets to 0

"Create a unique visual layout with CSS using a four-grid