Exploring Bootstrap navigation bars with customizable fixed content heights

I recently implemented Bootstrap navs into a dialog, but encountered an issue - every time I switch to another nav option, the dialog resizes due to the changing content height.

To see the issue in action, you can visit this CodePen link: https://codepen.io/cdemez/pen/JjYmELx

No need for code here, just check out the link above :-)

Is there a way to prevent this dynamic resizing, specifically on desktop (mobile is working fine)?

Note: The current implementation works smoothly on both mobile and desktop devices.

htmlcssbootstrap-4progressive-web-apps

Answer №1

Adjust the height of the tab content inside a modal using media queries

body {margin:2rem;}

.box-section {
  margin-top:10px;
  margin-bottom:10px;
  padding: 5px;
  border-style: solid;
  border-radius: 5px;
  border-color: lightgray;
  border-width:1px;
  //box-shadow: 0 0 0 1px lightgray;
  overflow: auto;
}

.nav-vertical {}

.nav-vertical .nav-item {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-vertical .nav-link {
    //padding: .5rem 3rem;
    color: darkgray !important;
    font-weight: bold;
}

.nav-vertical .nav-link.active {
    color: black !important;
    //border-bottom: #5A6268 2px solid !important;
    background-color: lightgray !important;
    /*-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;*/
}



/* Adjusting height for different screen sizes */
@media only screen and (min-width: 768px) {
  #basicModal #myTabContent{
    height:300px;
  }
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>

<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">

<!-- Edit information section -->
<div class="container">

  <!-- Vertical navigation tabs -->
  <div class="row">
    <div class="col-md-2 mb-3">
      <ul class="nav-vertical nav nav-pills flex-column" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="home" aria-selected="true">Edit profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#account" role="tab" aria-controls="profile" aria-selected="false">Account settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#password" role="tab" aria-controls="contact" aria-selected="false">Password</a>
        </li>
      </ul>
    </div>

    <!-- Pages content -->
    <div class="col-md-10">
      <div class="tab-content" id="myTabContent">

        <!-- Page : Edit profile -->
        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="home-tab">

          <div class="row">
            <div class="col-md-6 mb-3">
              <label>First name</label>
              <div class="input-group">
                <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Firstname" aria-label="" aria-describedby="basic-addon1" />
              </div>
              <ValidationMessage For="@(() => Model.OldPassword)" />
            </div>
            <div class="col-md-6 mb-3">
              <label>Last name</label>
              <div class="input-group">
                <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Lastname" aria-label="" aria-describedby="basic-addon1" />
              </div>
              <ValidationMessage For="@(() => Model.OldPassword)" />
            </div>
          </div>

          <br />
          <label>About you</label>
          <div class="input-group">
            <textarea @bind-Value="Model.NewPassword" class="form-control" placeholder="Tell us something about you!" aria-label="" aria-describedby="basic-addon1" ></textarea>
          </div>
          <ValidationMessage For="@(() => Model.NewPassword)" />
          <br />

        </div>

        <!-- Page : Account -->
        <div class="tab-pane fade" id="account" role="tabpanel" aria-labelledby="profile-tab">

          <label>User name</label>
          <div class="input-group">
            <InputText @bind-Value="Model.UserName" class="form-control" placeholder="User name" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.UserName)" />
          <br />
          <label>Email</label>
          <div class="input-group">
            <InputText @bind-Value="Model.Email" class="form-control" placeholder="Email" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.Email)" />
          <br />
          <div class="box-section bg-light">
            <h3>Delete Account</h3>
            Delete your account and all associated information.&nbsp;<button style="float: right" class="btn btn-danger">Delete Account</button>
          </div>

        </div>

        <!-- Page : Password -->
        <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="contact-tab">

          <label>Old password</label>
          <div class="input-group">
            <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Old password" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.OldPassword)" />
          <br />
          <label>New password</label>
          <div class="input-group">
            <InputText @bind-Value="Model.NewPassword" class="form-control" placeholder="New password" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.NewPassword)" />
          <br />
          <button class="btn btn-danger">Change password</button>
          <br/><br/>

        </div>

      </div>
    </div>
    <!-- /.col-md-8 -->
  </div>

</div>
<!-- Edit information section -->
        
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
        
        </div>
    </div>
  </div>
</div>

https://codepen.io/Hahkarthick/pen/mdeazXB

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalizing Twitter Bootstrap Directly from the Bootstrap Source Directory

As I work on developing a responsive web application using Twitter Bootstrap, my goal is to customize the Bootstrap framework to fit my specific needs. To do so, I have downloaded the Bootstrap source files from getbootstrap.com. My plan is to customize B ...

htmlcsstwitter-bootstrapless

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid

Error arises when uploading csv files to Node.js with Multer due to an unexpected field presence

I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...

javascripthtmlnode.jsvue.jsmulter

Updating the logo image on mobile devices using responsive CSS styling

My goal is to show a different image to users on mobile devices using only CSS, as I am unable to access the HTML code. On mobile, I used display:none for the header-logo-image img { and then added a background-url to the div to successfully display my alt ...

css

Tips for Maintaining the Execution of a JavaScript Function Within a Class until the Browser Window is Closed (Web Development)

The title might be a little confusing, so let me clarify here: I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be ...

javascripthtmlcss

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

I have a situation where I am loading an HTML page inside an object tag. Since the iPad does not support iFrames, I decided to use the object tag to load external HTML pages into a container. Everything is working well so far, but now I want to be able t ...

javascriptjqueryhtmlobject

How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

I've been struggling to change the default blue background color of the drop-down options when hovering over them with the mouse. Despite trying various solutions from this forum, nothing seems to be working at the moment. (These solutions used to wor ...

htmlcsstwitter-bootstrap

The CSS listings in the unordered list using the inline-block property are misaligned

My unordered list (ul) and list items (li) have a display set to inline-block. Each li contains an image and a div positioned below the image. The lis do not align in the same row when the divs vary in height. Here is a sample image for reference: ...

htmlcsshtml-listscss-position

The scenario in question involves Karate, where the response can be in either json or html format depending on certain

I am currently working on a request where the response can be returned either in Json or HTML format. Specifically, I am attempting to set up a condition for the HTML case, where if the response includes the string 'my string', then I need to tr ...

htmljsonif-statementcontainskarate

Issue with Bootstrap 4 navbar functionality on smaller screens

I'm currently in the process of integrating a navbar that transforms the navbar choices into a dropdown menu on smaller screens (as illustrated in the documentation available here). However, I am encountering an issue where the button responsible for ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Guide on implementing a confirmation dialog box for updating records in the jQuery Kendo UI Grid

When using Kendo UI, it prompts a confirmation window before deleting a record. https://i.sstatic.net/r2fti.png Is there a way to add this feature to the update and add record buttons? An example is provided below that demonstrates hooking all callback f ...

htmljquerykendo-uikendo-grid

What is the proper way to implement /deep/, >>>, or ::v-deep in Vue.js?

After doing some research, I came across this article explaining how in Vue.js, you can use either /deep/ or >>> in a selector to apply style rules to elements inside child components. However, when trying to implement this in my styles using SCSS ...

cssvue.jswebpacksassvue-cli

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

css

Is there a way to determine if a collapsed navbar is currently open?

My Bootstrap 4 navbar collapses on mobile, and I'm looking to detect when it opens and closes. Is there a way to achieve this? Thank you! ...

javascriptjquerytwitter-bootstrapbootstrap-4

Improving JavaScript event management efficiency through handling numerous asynchronous HTTP requests

Summary: In a SPA CMS project, multiple dynamic data sources are causing performance issues due to a large number of asynchronous HTTP calls required to display a table with extensive data. The challenge is to maintain good performance while handling the ...

javascripthtmlperformancegraphqlweb-worker

How can I display a PDF on a webpage for viewing on Chrome for Android without relying on Google Drive?

Embedding a PDF on a webpage is usually a simple task by using <embed src="a.pdf" width="500" height="400" type="application/pdf"> However, this method doesn't seem to work with the Chrome browser on Andr ...

htmlcsspdfembed

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

javascripthtmlcssreactjsmaterial-ui

Having trouble choosing an item from the Select2 drop-down menu

I have been developing an application that incorporates Select2 (version 3.5.1). The HTML used to create the dropdown / autocomplete field is as follows: <input id="mySelect" class="form-control" type="hidden"> The snippet above includes the form-c ...

javascripthtmljquery-select2

Adjustable scrollbar for varying content heights

Below is the HTML structure that I am working with: <div id="body"> <div id="head"> <p>Dynamic height without scrollbar</p> </div> <div id="content"> <p>Dynamic height with scrollbar< ...

htmlcssscrollbar