Column content merging in BS layout

Question

Column content merging in BS layout

Currently, I am exploring how to implement a two-column layout with the left column serving as a scrollable navbar. At this early stage of development, please excuse any imperfections in the code!

One issue that arose involved using the .sidebar class with the attribute "position:fixed" in the left column. The problem manifested as overlap between the content in the left column and the right column when this positioning was applied.

Experimenting with changing the grid column size from "col-sm-2" to simply "col" resolved the overlap problem, but it led to a noticeable gap between the content on the left and the right.

The use of "position:fixed" is non-negotiable for my project. Is there a way to prevent this overlapping issue while maintaining this fixed positioning? Any suggestions or guidance would be greatly appreciated.

Visit this link for more context and to contribute your insights.

css html bootstrap-4

Answer 1

Answer №1

To achieve the desired width and height for the navigation, add the col-auto class along with a masking container. You can refer to the code snippet below for a working example:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
#REF0001>li>a {
  color: white;
}
.nav-mask,
#sidebar {
  min-width: 250px;
  max-width: 250px;
  height: 40vh;
}
#sidebar {
  background: #7386D5;
  z-index: 999;
  color: #fff;
  transition: all 0.3s;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow-y: scroll;
  position: fixed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col col-auto">
      <ul id="sidebar" class="list-unstyled">
        <a href="#REF0001" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
          <i class="fas fa fa-plus-square" id="PM0001"></i>
          Parent-01
        </a>
        <ul class="list-unstyled" id="REF0001">
          <li>
            <a href="#">Home 1</a>
          </li>
          <li>
            <a href="#">Home 2</a>
          </li>
          <li>
            <a href="#">Home 3</a>
          </li>
        </ul>
        <li>A</li>
        <li>B</li>
      </ul>
      <div class="nav-mask"></div>
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

Answer 2

To achieve the desired width and height for the navigation, add the col-auto class along with a masking container. You can refer to the code snippet below for a working example:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
#REF0001>li>a {
  color: white;
}
.nav-mask,
#sidebar {
  min-width: 250px;
  max-width: 250px;
  height: 40vh;
}
#sidebar {
  background: #7386D5;
  z-index: 999;
  color: #fff;
  transition: all 0.3s;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow-y: scroll;
  position: fixed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col col-auto">
      <ul id="sidebar" class="list-unstyled">
        <a href="#REF0001" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
          <i class="fas fa fa-plus-square" id="PM0001"></i>
          Parent-01
        </a>
        <ul class="list-unstyled" id="REF0001">
          <li>
            <a href="#">Home 1</a>
          </li>
          <li>
            <a href="#">Home 2</a>
          </li>
          <li>
            <a href="#">Home 3</a>
          </li>
        </ul>
        <li>A</li>
        <li>B</li>
      </ul>
      <div class="nav-mask"></div>
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

Column content merging in BS layout

Answer №1

Similar questions

Ways to Get Rid of Line Beneath the Table

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

The iPhone display scaling issue is causing difficulty viewing the entire website

Designing a flexible layout that allows for both vertical and horizontal scrolling of content

Retrieve the chosen option within the current page

Closing the Bootstrap Dropdown Menu

Step-by-step guide on building a mat-table with nested attributes as individual rows

My JavaScript functions are not compliant with the HTML5 required tag

Creating One Comprehensive Object by Merging Multiple Character Objects

I am facing issues with my submit buttons as they are not functioning

Smoothly reveal a border at the moment of transition

The button is not centered within the grid container

Expanding the padding of the selected item to create more breathing room

Issue with displaying HTML escaped characters such as "&#39" results in showing a pound sign instead of a single quote

The show-word-limit feature is malfunctioning on the element.eleme.io platform

Maximizing the use of default top positioning for absolutely positioned elements

Could it be that grid-area does not function properly with the attr function, or is this intentional?

Align the user profile picture and username vertically in the header using CSS

Leveraging webpack alongside url-loader for embedding images within React applications

Is it possible to conceal the status bar in a web app designed for iOS 7?