How can Bootstrap 4 be utilized to achieve a responsive height on a single page application with no scrolling?

Embarking on the journey of responsive website design as a beginner in front end development, I am currently working on creating a basic angular chat application with bootstrap. Keeping responsiveness in mind throughout the design process is my goal, but I seem to face challenges when nesting flex boxes, indicating a gap in my understanding. Here are the views I envision for larger and smaller devices:

Large:

https://i.sstatic.net/Jht7R.png

Small device (note I have not done anything to make the settings change to a button):

https://i.sstatic.net/pd82o.png

However, the reality I am experiencing when using h-100 reveals a different outcome:

https://i.sstatic.net/fCoWR.png

Upon analyzing the issue, it appears that applying h-100 with col-12 causes the left side to occupy all the space, pushing the right side off the page. I attempted achieving a similar appearance with flex-fill and flex-grow-1, but these classes did not impact the document as expected. Here is the snippet of my code:

<app-header></app-header>
<div class="container-fluid" id="mainContent">
    <div class="row h-100 flex-column-reverse flex-md-row">
      <div class="col-md-3 col-12 flex-fill">
        <div class="d-flex flex-column h-100 justify-content-between">
          <div>
              <app-channels></app-channels>
          </div>
          <div>
              <app-settings></app-settings>
          </div>
        </div>
      </div>
      <div class="col-md-9 col-12">
        <app-messages></app-messages>
      </div>
    </div>
</div>

(app-messages also uses h-100 to fill the screen)

custom scss:

@import "../node_modules/bootstrap/scss/bootstrap";

html, body {
    height: 100% !important;
    width: 100% !important;
}

Is there a way I can achieve the desired switching between views posted above using pure flexbox instead of relying on h-100? Are there responsive classes like h-sm-100 that only apply 100% height on small screens and above?

Thank you for your assistance.

Answer №1

When it comes to adjusting height, sometimes you need to take matters into your own hands. It might seem complicated, but you can easily achieve it by referring to this Angular demo

The code below provides the solution you are looking for.

CSS section:

.outsideDiv{ overflow-y:hidden;}
.app-header { height:10vh; background:#000; color:#fff;}
.myHeight{  background: lightgray; }
.mySection{padding:0; }

.app-messages {  background: #c7b6c7;}
.createMessage{background: lightyellow; margin: 1%; position: absolute; bottom: 0px; width: 98%; }
.app-settings {  background:blue; }
.app-channels {  background:#b3fbfb;}

@media SCREEN AND (min-width: 768px){
  .myHeight{ height:90vh;  }
  .app-channels { height: 80%; }
  .app-messages { height: 100%; }
  .app-settings { height: 20%;  }
}
@media SCREEN AND (max-width: 767px){
  .myHeight{ height:auto;  }
  .myHeightSection1 { height:20vh;}
  .myHeightSection2 { height:70vh;}
  .app-channels { height: 100% }
  .app-messages { height: 100%; }
  .app-settings { height: 5%;  width:20%; position:fixed; right:0; bottom:0; }
}

HTML section:

<div class='outsideDiv'>

    <div class="app-header">
        <app-header>
        </app-header>
    </div>
    <div class="container-fluid" id="mainContent">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-12 d-flex flex-column mySection">
                <div class="d-flex flex-column h-100 justify-content-between order-last">
                    <div class='myHeight myHeightSection1'>
                        <div class="app-channels">
                            <app-channels></app-channels>
                        </div>
                        <div class="app-settings">
                            <app-settings></app-settings>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-12 col-12 order-first order-lg-2 order-md-2 mySection">
                <div class='myHeight myHeightSection2'>
                    <div class="app-messages">
                        <app-messages></app-messages>
                        <div class='createMessage'>Create Message</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

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

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

How can I send parameters to an HTML file using Node.js?

In my current code res.sendfile('./home.html',{user:req.user}), I need to figure out a way to access the user parameter directly in the HTML file without relying on a template engine. Can anyone suggest how this can be achieved? ...

Do not allow negative values to be displayed in the text box

Plunker I need to restrict negative values from being entered into a text field. If the user tries to input a negative value, I want the text box to remain unchanged. Although I have a directive that prevents negative values from being entered, it seems ...

Is it important that the end date does not exceed the start date?

In my request, the end date cannot be later than the start date. For example, if the start date is 24/4/2017 and the end date is 23/4/2017, the search function should be disabled for the calendar date 23/4/2017. Only dates from 24/4/2017 onwards should be ...

What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achi ...

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

Optimizing Divs for Maximum Layout Efficiency

My current issue involves a series of divs that contain varying amounts of content. These divs are floated left and I am striving to align them seamlessly without any vertical space between them (except for the 10px margin that I have included). You can v ...

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

Retrieving information from a dynamically created HTML link地址

I was curious about whether Selenium is the sole library capable of extracting data from a table on a specific webpage, found here. While attempting to navigate these sites with bs4, I found that it only displayed the table headers without any data. It wo ...

Learn how to incorporate PHP7 code into your HTML file through the use of .htaccess configurations

I have a Linux server with PHP 7.* installed. I want to embed PHP code into HTML files, but currently it just renders the PHP code on the webpage. I've tried adding the following code to my .htaccess file, but it doesn't seem to be working: AddH ...

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

Determining the dimensions of a div once it has completed loading

Is there a way to retrieve the width and height of a div after it has fully loaded, rather than before? I am currently using JavaScript to get the dimensions, but it seems to be returning the values before the image has finished loading. How can I rectify ...

Submitting user inputs from an HTML form into a MySQL database using PHP

I've successfully put together an HTML form that is meant to capture user input data and insert it directly into a table within mySQL. newuser.php file <?php //including the connection page include('./DB_Connect.php'); //create a n ...

The 'change' event is not being triggered by fromEvent within a Directive, but it is working with the 'click' event

Recently diving into the world of Angular and RxJS has left me with a question. I am attempting to listen for a change event on all mat-radio-group elements within a document. Oddly enough, when I use @HostListener, I am able to capture the event and log i ...

What's the best way to rearrange Bootstrap cards from a horizontal layout to a vertical layout for improved responsiveness?

I'm currently working with Bootstrap to align two cards horizontally, but I also want to ensure that mobile users can view the cards stacked in a column layout. I've experimented with adding 'flex-direction' in combination with the @med ...

How can you properly structure chainable functions in Angular?

Recently, I've been working on developing custom functions for my Angular application. Following the official guidelines, I have created an independent library. My goal is to create chainable functions similar to this: var obj = { test : function( ...

Utilizing useClass in Angular's APP_INITIALIZER

Before my application starts up, I require some API data and am currently handling it with APP_INITIALIZER and useFactory. However, I aim to enhance the structure by separating all the code from app.module.ts: app.module.ts import { NgModule} from '@ ...

What information is transferred when the submit button on a form is clicked?

Currently, I am utilizing node.js along with the jade templating engine. Within my jade file, I have a form structured like this: form.form-signin(style="padding-left:10px", action='/update', method='post') table.table.table-hove ...

Using Ajax and jQuery to dynamically insert an option into a datalist

I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...