Struggling to align the push menu properly within the Bootstrap framework

Question

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am having trouble getting the menu to align inline properly. Below is the code for reference:

HTML

<div id="calendar-wrapper">
    <div class="container-fluid">
        <div class="row">

            <div id="resource-bar" class="sidenav col-sm-2">
                <h4>Resource</h4>
                <div class="input-group">
                    <input type="text" placeholder="Search resource"
                           class="form-control resource-filter"/>
                    <span class="input-group-btn">
                            <button class="clear btn btn-default clean-resource btn-danger" type="button">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </span>
                </div>

                <div id="popover-content" hidden></div>
            </div>

            <div id="calendar-container" class="col-sm-10">
                <div id="calendar" class="well"></div>
            </div>

        </div>
    </div>
</div>

<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>

Note that the HTML provided above has been modified for demonstration purposes.

CSS

.sidenav
{
    background-color: azure;
    height: 100%;
    width: 0;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden; 
    transition: 0.5s;
}

#calendar-container
{
    background-color: whitesmoke;
    transition: margin-left .5s;
    padding: 16px;
}

JS

$(document).ready(function()
{
    var resourceContainer = $('#resource-bar');
    var calendarContainer = $('#calendar-container');

    $('#show').click(function()
    {
        resourceContainer.css('width', '250px');
        calendarContainer.css('margin-left', '250px');
    });

    $('#hide').click(function()
    {
        resourceContainer.css('width', '0px');
        calendarContainer.css('margin-left', '0px');
    });
})

When the left-side menu is closed, the layout appears as follows:

https://i.stack.imgur.com/gNxi1.png

The issue arises when the "show" button is clicked, causing the menu to appear:

https://i.stack.imgur.com/Ej5sa.png

Bugs noted include:

Upon opening the menu, the divs display in two lines instead of one row
Applying the class col-sm-2 to resource-bar means that the overflow-x: hidden; property does not take effect, resulting in the menu being visible when it should be hidden
The col-sm-2 element does not wrap to a new line when the screen resolution is insufficient in width

If anyone could provide assistance in resolving these issues, it would be greatly appreciated. Thank you. JSFIDDLE.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Adjusted to a different workaround that avoids impacting the bootstrap grid system:

In this configuration, the sidebar is set to an absolute position because it's outside the viewport and has a fixed width of 250px; therefore, using the grid system is not required.
The visible input will not overflow when the sidebar is displayed.
Raised the buttons above the sidebar.
It's important to note that the HTML structure has been modified accordingly.

$(document).ready(function() {
  var resourceContainer = $('#resource-bar');
  var calendarContainer = $('#calendar-container');
  $('#show').click(function() {
    resourceContainer.css('width', '250px');
    calendarContainer.css('margin-left', '250px');
  });
  $('#hide').click(function() {
    resourceContainer.css('width', '0px');
    calendarContainer.css('margin-left', '0px');
  });
})

div.sidenav {
  background-color: azure;
  height: 100%;
  width: 0;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  /* added absolute to sidenav since it will have fixed width anyways */
  position: absolute;
}
#calendar-container {
  background-color: whitesmoke;
  transition: margin-left .5s;
  padding: 16px;
  /* this is just to vertically align with sidebar input */
  padding-top: 36px;
}
button {
  position: relative;
  z-index: 2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div id="calendar-container" class="col-sm-12">
        <div id="calendar" class="well"></div>
      </div>
      <div id="resource-bar" class="sidenav">
        <h4>Resource</h4>
        <div class="input-group">
          <input type="text" placeholder="Search resource" class="form-control resource-filter" />
          <span class="input-group-btn">
            <button class="clear btn btn-default clean-resource btn-danger" type="button">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </span>
        </div>
        <div id="popover-content" hidden></div>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<button type="button" id="highlight">Highlight</button>
<button type="button" id="conceal">Conceal</button>

https://i.stack.imgur.com/yLOOv.png

https://i.stack.imgur.com/h1usH.png

Answer 2

Adjusted to a different workaround that avoids impacting the bootstrap grid system:

In this configuration, the sidebar is set to an absolute position because it's outside the viewport and has a fixed width of 250px; therefore, using the grid system is not required.
The visible input will not overflow when the sidebar is displayed.
Raised the buttons above the sidebar.
It's important to note that the HTML structure has been modified accordingly.

$(document).ready(function() {
  var resourceContainer = $('#resource-bar');
  var calendarContainer = $('#calendar-container');
  $('#show').click(function() {
    resourceContainer.css('width', '250px');
    calendarContainer.css('margin-left', '250px');
  });
  $('#hide').click(function() {
    resourceContainer.css('width', '0px');
    calendarContainer.css('margin-left', '0px');
  });
})

div.sidenav {
  background-color: azure;
  height: 100%;
  width: 0;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  /* added absolute to sidenav since it will have fixed width anyways */
  position: absolute;
}
#calendar-container {
  background-color: whitesmoke;
  transition: margin-left .5s;
  padding: 16px;
  /* this is just to vertically align with sidebar input */
  padding-top: 36px;
}
button {
  position: relative;
  z-index: 2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div id="calendar-container" class="col-sm-12">
        <div id="calendar" class="well"></div>
      </div>
      <div id="resource-bar" class="sidenav">
        <h4>Resource</h4>
        <div class="input-group">
          <input type="text" placeholder="Search resource" class="form-control resource-filter" />
          <span class="input-group-btn">
            <button class="clear btn btn-default clean-resource btn-danger" type="button">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </span>
        </div>
        <div id="popover-content" hidden></div>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<button type="button" id="highlight">Highlight</button>
<button type="button" id="conceal">Conceal</button>

https://i.stack.imgur.com/yLOOv.png

https://i.stack.imgur.com/h1usH.png

Answer 3

Answer №2

The issue you are experiencing is due to a conflict between Bootstrap and your custom JavaScript-generated styles. While you seem familiar with the Bootstrap Grid layout, it's important to remember that there are 12 columns in a row according to . Each column has a defined width and margins, so filling all 12 columns might cause alignment issues.

To resolve this without affecting other styling, consider resizing the column and adjusting the margins. You can view an example here: https://jsfiddle.net/Zeenglishking/DTcHh/28837/

    <div id="calendar-container" class="col-sm-8">
                <div id="calendar" class="well"></div>
            </div>


  $('#show').click(function()
  {
    resourceContainer.css('width', '250px');
    calendarContainer.css('margin-left', '50px');
  });

If you notice the menu remains visible even when closed, it's likely due to Bootstrap styling. You can override these styles using "!important". More information on style overriding can be found at https://css-tricks.com/snippets/css/style-override-technique/.

In addition, for a responsive design, use 'col-xs-**' alongside smaller size columns such as col-xs-1 and col-xs-4. This will ensure proper display on various viewport sizes. For more details, visit http://getbootstrap.com/css/#grid-options.

It's essential to understand Bootstrap thoroughly before making adjustments to avoid conflicts with other elements. Blindly applying fixes can lead to further complications in your code.

Answer 4

The issue you are experiencing is due to a conflict between Bootstrap and your custom JavaScript-generated styles. While you seem familiar with the Bootstrap Grid layout, it's important to remember that there are 12 columns in a row according to . Each column has a defined width and margins, so filling all 12 columns might cause alignment issues.

To resolve this without affecting other styling, consider resizing the column and adjusting the margins. You can view an example here: https://jsfiddle.net/Zeenglishking/DTcHh/28837/

    <div id="calendar-container" class="col-sm-8">
                <div id="calendar" class="well"></div>
            </div>


  $('#show').click(function()
  {
    resourceContainer.css('width', '250px');
    calendarContainer.css('margin-left', '50px');
  });

If you notice the menu remains visible even when closed, it's likely due to Bootstrap styling. You can override these styles using "!important". More information on style overriding can be found at https://css-tricks.com/snippets/css/style-override-technique/.

In addition, for a responsive design, use 'col-xs-**' alongside smaller size columns such as col-xs-1 and col-xs-4. This will ensure proper display on various viewport sizes. For more details, visit http://getbootstrap.com/css/#grid-options.

It's essential to understand Bootstrap thoroughly before making adjustments to avoid conflicts with other elements. Blindly applying fixes can lead to further complications in your code.

Struggling to align the push menu properly within the Bootstrap framework

Answer №1

Answer №2

Similar questions

The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

Error found in jQuery validation - TypeError: undefined

Show using foreach, with a modification of the spacing between rows and columns

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

Retrieve the information from a fetch call and save it for later use

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

Issues with screen scrolling becoming stuck in React and Material UI

Utilizing React-Router-Redux alongside the powerful features of React-Bootstrap

Make the image take up the entire screen in HTML

Limit the input to a maximum number of characters

Steps for deactivating tab stops on the primary webpage in the presence of a snackbar

Creating an AJAX URL in an external JavaScript file within a Django project

Position flex-box items to align with the baseline of the final line of text within a block

Discover the method for extracting the complete URL value individually using jQuery

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Tips for creating a star program using Angular 2+

The alignment of the JQuery Mobile tabs is off

Regain focus after selecting a date with Bootstrap datepicker

Preventing CSRF attacks using AJAX in a Django application

Preventing Jquery from showing an image when validation fails using PHP or Jquery