flexbox layout with a fixed sidebar that stays in place

Question

flexbox layout with a fixed sidebar that stays in place

Is there a way to make the sidebars in the holy grail layout sticky using flexbox? Specifically, I want the aside and nav sections of the HTML to stop scrolling down further once the last element is reached. I've tried various methods but with limited success.

HTML:

<body>
     <header>header</header>
     <div id='main'>
        <article>This area has a lot of content </article>`
        <nav> This nav should remain fixed </nav>
        <aside>This aside too</div></aside>
     </div>
     <footer>footer</footer>
</body>

CSS:

body {
   /*font: 24px Helvetica;*/
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

css flexbox

Answer 1

Answer №1

Have you considered implementing the new CSS3 feature position: sticky on the nav and aside elements?

The drawback of this method is that it lacks support from Internet Explorer, but it eliminates the need for JavaScript.

I applied this modification here:

body {
   /*font: 24px Helvetica;*/
   background: #999999;
  }

  #main {
position: relative;
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
 
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

#main > nav, #main > aside {
position: sticky;
top: 0;
height: 100%;
}

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

<body>
     <header>header</header>
     <div id='main'>
        <article>This area has lot of content </article>`
        <nav> This nav should not scroll</nav>
        <aside>This aside too</div></aside>
     </div>
     <footer>footer</footer>
</body>

Answer 2

Have you considered implementing the new CSS3 feature position: sticky on the nav and aside elements?

The drawback of this method is that it lacks support from Internet Explorer, but it eliminates the need for JavaScript.

I applied this modification here:

body {
   /*font: 24px Helvetica;*/
   background: #999999;
  }

  #main {
position: relative;
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
 
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

#main > nav, #main > aside {
position: sticky;
top: 0;
height: 100%;
}

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

<body>
     <header>header</header>
     <div id='main'>
        <article>This area has lot of content </article>`
        <nav> This nav should not scroll</nav>
        <aside>This aside too</div></aside>
     </div>
     <footer>footer</footer>
</body>

Answer 3

Answer №2

If I've grasped your intention correctly, this solution should align with what you're seeking. The key lies in establishing three distinct states or conditions for positioning the element. These are outlined as follows:

When we scroll past the beginning of the sidebar but haven't yet reached its end, excluding the menu's height.
Once we scroll beyond the end of the sidebar, factoring in the menu's height.
If the page's scrolling position is before the starting point of the sidebar - essentially representing the menu's default state prior to any scrolling.

if(currentScrollPosition >= sidebarPosition && currentScrollPosition <= threshold)
{
     $widget.css({top: 10, position:'fixed'});
}
else if(currentScrollPosition >= threshold)
{
    $widget.css({top: threshold, position:'absolute'});
}
else if(currentScrollPosition <= sidebarPosition)
{
    $widget.css({top: 'auto', position:'static'});
}

http://codepen.io/anon/pen/jByPEJ

Answer 4

If I've grasped your intention correctly, this solution should align with what you're seeking. The key lies in establishing three distinct states or conditions for positioning the element. These are outlined as follows:

When we scroll past the beginning of the sidebar but haven't yet reached its end, excluding the menu's height.
Once we scroll beyond the end of the sidebar, factoring in the menu's height.
If the page's scrolling position is before the starting point of the sidebar - essentially representing the menu's default state prior to any scrolling.

if(currentScrollPosition >= sidebarPosition && currentScrollPosition <= threshold)
{
     $widget.css({top: 10, position:'fixed'});
}
else if(currentScrollPosition >= threshold)
{
    $widget.css({top: threshold, position:'absolute'});
}
else if(currentScrollPosition <= sidebarPosition)
{
    $widget.css({top: 'auto', position:'static'});
}

http://codepen.io/anon/pen/jByPEJ

Answer 5

Answer №3

Learn how to create a sticky sidebar using javascript and css with simple steps below.

$(function(){

var stickySidebar = $('.sticky');

if (stickySidebar.length > 0) {
  var stickyHeight = stickySidebar.height(),
      sidebarTop = stickySidebar.offset().top;
}

// on scroll move the sidebar
$(window).scroll(function () {
  if (stickySidebar.length > 0) {
    var scrollTop = $(window).scrollTop();
            
    if (sidebarTop < scrollTop) {
      stickySidebar.css('top', scrollTop - sidebarTop);

      // stop the sticky sidebar at the footer to avoid overlapping
      var sidebarBottom = stickySidebar.offset().top + stickyHeight,
          stickyStop = $('.main-content').offset().top + $('.main-content').height();
      if (stickyStop < sidebarBottom) {
        var stopPosition = $('.main-content').height() - stickyHeight;
        stickySidebar.css('top', stopPosition);
      }
    }
    else {
      stickySidebar.css('top', '0');
    } 
  }
});

$(window).resize(function () {
  if (stickySidebar.length > 0) {
    stickyHeight = stickySidebar.height();
  }
}); });

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 25px;
  background-color: #361039;
  color: #E2E0DE;
  margin: 0;
}

header {
  display: block;
  background-color: #121325;
  font-size: 24px;
  height: 50px;
  padding: 2%;
  text-align: center;
}

section {
  float: left;
  width: 70%;
  padding: 1%;
  margin-right: 1%;
}

aside {
  float: left;
  width: 25%;
  padding: 1%;
  background-color: #5C255A;
}

.sticky {
  position: relative;
  top: 0;
}

footer {
  display: block;
  clear: both;
  background-color: #121325;
  font-size: 24px;
  height: 300px;
  padding: 2%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>This is a header</header>

<section class="main-content">
  <article>
    <h1>This is Paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
  </article>
</section>

<aside class="sticky">
  <h1>This is a sticky sidebar</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>

<footer>This is a footer</footer>

Answer 6

Learn how to create a sticky sidebar using javascript and css with simple steps below.

$(function(){

var stickySidebar = $('.sticky');

if (stickySidebar.length > 0) {
  var stickyHeight = stickySidebar.height(),
      sidebarTop = stickySidebar.offset().top;
}

// on scroll move the sidebar
$(window).scroll(function () {
  if (stickySidebar.length > 0) {
    var scrollTop = $(window).scrollTop();
            
    if (sidebarTop < scrollTop) {
      stickySidebar.css('top', scrollTop - sidebarTop);

      // stop the sticky sidebar at the footer to avoid overlapping
      var sidebarBottom = stickySidebar.offset().top + stickyHeight,
          stickyStop = $('.main-content').offset().top + $('.main-content').height();
      if (stickyStop < sidebarBottom) {
        var stopPosition = $('.main-content').height() - stickyHeight;
        stickySidebar.css('top', stopPosition);
      }
    }
    else {
      stickySidebar.css('top', '0');
    } 
  }
});

$(window).resize(function () {
  if (stickySidebar.length > 0) {
    stickyHeight = stickySidebar.height();
  }
}); });

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 25px;
  background-color: #361039;
  color: #E2E0DE;
  margin: 0;
}

header {
  display: block;
  background-color: #121325;
  font-size: 24px;
  height: 50px;
  padding: 2%;
  text-align: center;
}

section {
  float: left;
  width: 70%;
  padding: 1%;
  margin-right: 1%;
}

aside {
  float: left;
  width: 25%;
  padding: 1%;
  background-color: #5C255A;
}

.sticky {
  position: relative;
  top: 0;
}

footer {
  display: block;
  clear: both;
  background-color: #121325;
  font-size: 24px;
  height: 300px;
  padding: 2%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>This is a header</header>

<section class="main-content">
  <article>
    <h1>This is Paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna. Vivamus dignissim gravida tellus sed pulvinar. Morbi eleifend dolor vel velit viverra aliquam. In pharetra felis non leo congue, id iaculis dui laoreet. Pellentesque accumsan ligula sed nisl eleifend consequat. Proin at orci purus. Praesent dignissim at odio nec fringilla. Nulla lacinia ultricies auctor. Mauris vel diam nunc. Ut lorem arcu, interdum id tortor a, tincidunt vestibulum eros. Vivamus sit amet mattis turpis. Nullam auctor ut velit nec adipiscing. Morbi et vehicula diam.</p>
  </article>
</section>

<aside class="sticky">
  <h1>This is a sticky sidebar</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Duis quis nibh gravida, gravida nisl ac, imperdiet sem. Fusce quis malesuada magna.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>

<footer>This is a footer</footer>

Answer 7

Answer №4

I have implemented the code from CodePen and restructured the JavaScript code along with some customized logic for the sidebar as needed. I hope this solution proves to be beneficial :)

var sidebarArea = $('aside ul');
var footerArea = $('footer');
margin = 10;
offsetTop = sidebarArea.offset().top - margin;
offsetBottom = footerArea.offset().top - (margin * 3 + sidebarArea.height());

$(window).scroll(function() {
  scrollTop = $(window).scrollTop();
  if (scrollTop > offsetTop && sidebarArea.hasClass('natural')) {
    sidebarArea.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offsetTop > scrollTop && sidebarArea.hasClass('fixed')) {
    sidebarArea.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (scrollTop > offsetBottom && sidebarArea.hasClass('fixed')) {
    sidebarArea.removeClass('fixed').addClass('bottom').css('top', offsetBottom);
  }
  if (offsetBottom > scrollTop && sidebarArea.hasClass('bottom')) {
    sidebarArea.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});

(remaining CSS and HTML code intact)

Answer 8

I have implemented the code from CodePen and restructured the JavaScript code along with some customized logic for the sidebar as needed. I hope this solution proves to be beneficial :)

var sidebarArea = $('aside ul');
var footerArea = $('footer');
margin = 10;
offsetTop = sidebarArea.offset().top - margin;
offsetBottom = footerArea.offset().top - (margin * 3 + sidebarArea.height());

$(window).scroll(function() {
  scrollTop = $(window).scrollTop();
  if (scrollTop > offsetTop && sidebarArea.hasClass('natural')) {
    sidebarArea.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offsetTop > scrollTop && sidebarArea.hasClass('fixed')) {
    sidebarArea.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (scrollTop > offsetBottom && sidebarArea.hasClass('fixed')) {
    sidebarArea.removeClass('fixed').addClass('bottom').css('top', offsetBottom);
  }
  if (offsetBottom > scrollTop && sidebarArea.hasClass('bottom')) {
    sidebarArea.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});

(remaining CSS and HTML code intact)

flexbox layout with a fixed sidebar that stays in place

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing scrolling functionality within a nested container

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

Tips on customizing the CSS responsiveness of your Bootstrap carousel

Encircle a particular row in a table with a border

Issues arise with the functionalities of FireFox related to transformations and transitions

Tips for positioning a highcharts pie chart and legend in the middle of a page

Creating a customized Paypal form with user-selected options

The dropdown menu is extending outside the header in a right-to-left (RTL) direction

Conceal a table with jQuery

Showing information from a table for editing purposes with the use of HTML input tags

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

The 600 pixel wide page is not completely filling the 640 pixel width screen on a mobile device

Tips for merging identical media queries into a single query using SASS

Is there a way to circumvent the mouse up event?

Combining Bootstrap with Rails

Responsive slide displays a unique number of items per slide depending

Ways to stop the floating label from blending with the input field

Creating a flexible image layout within a container with relative positioning

Is the Ngx-bootstrap popover automatic positioning malfunctioning when placed on the right side of the screen?

Attempting to apply custom styles to jQuery components using CSS