Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

In my Bootstrap-Vue application, I have set up the following hierarchy:

<b-navbar.../>

<b-container >
    <b-row align-v="center" style="min-height:100vh">
      <b-col style="align-items:center">
            <h1>404 Error</h1>
            <p>The page you have requested does not exist.</p>
      </b-col>
    </b-row>
</b-container>

The <b-navbar .../> element is designed to scale based on its content rather than having a fixed height.

I am looking for a solution that will automatically adjust the container's content to fill the remaining viewport space without the need to manually calculate the height of <b-navbar .../>. This way, the 404 text will always be positioned in the center of the available space. Currently, when I expand the Navbar, the 404 text ends up moving beyond the lower edge of the viewport.

htmlcsstwitter-bootstrapvue.jsvuejs2

Answer №1

Are you satisfied with this outcome?

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
<div class="wrapper">
  <b-navbar>NAVBAR</b-navbar>

  <b-container class="container">
      <b-row align-v="center">
        <b-col>
          <h1>404 Error</h1>
          <p>The page you have requested does not exist.</p>
        </b-col>
      </b-row>
  </b-container>
</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

Link the source data within a v-for loop to the props value

I have brought in several JSON files containing different sets of data. For my parent.vue input, I aim to iterate through these JSON files dynamically. <div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index"> T ...

javascriptvue.jsvuejs2bootstrap-vuevue-props

The border length of the unordered list is equal to half of the length

I would like the blue borders of these "ul" elements to be centered beneath the black "li" elements, with a width that is 50% of the child width. However, I'm unsure about how to achieve this. I attempted using ":before", but it only seems to work for ...

htmlcss

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello St ...

htmlcssdjango

Generating a QR code with a web link in Node.js

Currently, I am immersed in a project that requires me to generate a QR code with specific information using NodeJS. To kick things off, I've set up a canvas in HTML and transferred it to NodeJS. <canvas id="canvas" width="300" height="300">& ...

htmlnode.jsqr-code

Deleting a tag from a Flask document

Styling my form has been a challenge with Flask, particularly in regards to the picture field. I'm struggling to remove the "No file chosen" text and style the upload button using CSS, despite incorporating Bootstrap into my file. When hovering over ...

htmlcssflask

Do you think this is the correct method for developing a component?

Recently, I designed a view to display contact information for the user: <template> <div v-for="user in users" class="user"> <div class="userInformation"> <img :src="user.photo" /> ...

vue.jsvue-component

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

javascriptjquerycss

The function cannot be applied to the size of the map within the action payload

Is there a way to replace the for loop with the map method? The data structure for book.pages is in the format [{},{},{}] I tried using the size method and included this line console.log("book.pages.map.size();--->", book.pages.map.si ...

javascripthtmlreactjsloopsredux

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

javacssspringprimefaces

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

javascripthtmlnode.jsexpress

How can you access a sibling of the parent element of the current element in Jquery?

I'm working on an HTML project where I have a select field. Depending on the option selected, I need to update the price field with the corresponding price fetched using Ajax. Additionally, I want to be able to input multiple rows by clicking on the ...

javascripthtmljqueryajax

"Discrepancy between default checkbox and its current state

Currently, I am facing a challenge with setting the defaultChecked value of a checkbox to match the value stored in my database. Despite having the correct boolean value in the database, the defaultChecked always ends up being false. Here is how I have ta ...

htmlreactjsreact-hookscheckbox

Activate Vuetify to toggle a data object in an array list when the mouse hovers over

I'm currently working on a project where I need to toggle a Vuetify badge element for each item in an array when the containing div is hovered over. While I've been able to achieve a similar effect using CSS in a v-for loop with an array list, I ...

javascriptvue.jsvuetify.jsmouseover

The jQuery script automatically triggers submission on its own

Does anyone have an idea why the form auto-submits itself? I can't figure out why it's doing that. I'm using query parsley to validate the form in a modal. When a user opens the modal and starts typing in the text area, they must type at l ...

javascriptjqueryhtmlajax

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

javascriptcsshtml

The beginning of my HTML input is not at the top of the page

I have a query regarding the custom input line I created recently. When I adjust the height of the input, instead of aligning with the top, the text appears vertically centered. Moreover, the text does not wrap to a new line once it reaches the outermost ...

htmlcss

Certain components display with greater height on Internet Explorer

When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...

htmlcssinternet-explorer

example of reusing vue js component multiple times on a single page

Within my components, I am making an axios call. I have defined two of them with props that provide the URI for the axios call. export default { name: "CardData", props :['uri','suffixe' ,'label'], data : function (){ r ...

vue.jsaxios

Error encountered while trying to eliminate array element

I have a project in the works that involves creating a page where users can filter suggestions and vote for their favorites. The screen is divided into 3 tabs: [Top Rated], [Newest], and [My Votes]. Upon loading the screen, a call to the database is made ...

javascriptvue.jsvuejs2