Tips for ensuring that your sidebar remains contained within the boundaries of the outer div

Here is my Vue code utilizing bootstrap-vue. I am attempting to place the sidebar within the card body, but it's not displaying as intended. How can I adjust it to fit properly inside either the outer div or the b-card body?

<template>
  <div class="">
    <div>
      <b-card title="Card Title" body-class="text-center" header-tag="nav">
        <template v-slot:header>
          <b-nav card-header tabs>
            <b-nav-item active>Active</b-nav-item>
            <b-nav-item>Inactive</b-nav-item>
            <b-nav-item disabled>Disabled</b-nav-item>
          </b-nav>
        </template>

        <b-card-text>
          Including text to support the content below.
        </b-card-text>
        <b-card-body>
          <b-sidebar visible="true" title="Sidebar" shadow>
            <div class="px-3 py-2">
              <p>
                Testing out some lorem ipsum text here. 
              </p>
              <b-img
                src="https://picsum.photos/500/500/?image=54"
                fluid
                thumbnail
              ></b-img>
            </div>
          </b-sidebar>
        </b-card-body>
        <b-button variant="primary">Navigation Button</b-button>
      </b-card>
    </div>
  </div>
</template>

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

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

cssvue.jsbootstrap-vue

Answer №1

Typically, the sidebar is not meant to be placed within a container but rather utilized as an off-canvas menu for the entire page.

Nevertheless, with some CSS tweaking, you can customize it to meet your specific requirements. By default, the sidebar is set to position: fixed, ensuring its fixation to the viewport.

To adjust this behavior, you can change it to position: absolute; this will align it based on the closest parent element that has a position: relative attribute - which in this scenario would be the card.

In the provided code snippet, the sidebar overlaps the title. If you wish to confine it solely within the body content, all you have to do is enclose it within another element styled with position: relative.

new Vue({
  el: "#app"
});
body {
  padding: 1rem;
}

.my-sidebar.b-sidebar-outer {
  position: absolute !important;
  height: 100% !important;
}

.my-sidebar .b-sidebar {
  position: absolute !important;
  height: 100% !important;
}
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141352f352f30">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfaa7fcffefcab8a4bbb9a4ba">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5a8f3f0e0c5b7abb4b6abb5">[email protected]</a>/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
  <!-- The height is only here for the example -->
  <b-card style="min-height: 300px;" class="overflow-hidden" no-body>
    <b-card-header>
      <b-card-title>Title</b-card-title>
    </b-card-header>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
      <div class="px-3 py-2">
       <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        </p>
      </div>
    </b-sidebar>
  </b-card>
</div>

Answer №2

To resolve this issue, I made changes to the element's style using JQuery. The line top': '60px' dictates the height of the navbar.

ready() {
   $('#sidebar-1').css(
     {'top': '60px',
       'opacity': '80%'       
     }
    );
},

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

The Vue component fails to render when embedded within the HTML markup

I am having trouble implementing Vue components in my project. Additionally, I am using Pug (Jade) as a preprocessor. However, when I view the resulting HTML code, I see the raw template without the transformation from Vue component to HTML code. Below ...

vue.js

The integration of Laravel (Homestead) Sanctum is malfunctioning when combined with a standalone Vue application

After running the command php artisan serve my Laravel application successfully resolves on localhost:8000. I have configured Laravel Sanctum as follows: SESSION_DRIVER=cookie SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8080 As for m ...

javascriptlaravelvue.jslaravel-sanctum

Utilize JavaScript to save user-selected CSS styles by setting a cookie in jQuery

I am currently using a jQuery styleswitcher to change the stylesheet upon click. Despite trying various solutions, I have been unable to find a resolution to this issue. Could someone please assist me in setting a cookie for this functionality? Markup: ...

javascriptjqueryhtmlcsscookies

Getting elements in order with bootstrap

Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...

htmlcssangularjstwitter-bootstrap

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

htmlcsslist

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

Unexpected error occurred while attempting to set up VueJs project resulting in fsevents failure

Encountering an error with fsevents while attempting to install a VueJs project. I am using Windows 10 for development. I have tried multiple solutions but none have been successful. npm install --no-optional (Unsuccessful) npm install -f (Unsuccessful ...

node.jsvue.jsvuejs2windows-dev-center

Enhancing Vue 3 Tables with Dynamic Slots

I have a unique and specific inquiry regarding Vue3, slots, and the components I've developed for a reusable table setup. CustomTable.vue <template> <table> <thead> <slot renderAs="header"></slot> ...

vue.jsvuejs3

Padding for headlines is not working as intended

I have been working on a website design that features a main heading with a light blue background behind it. I initially used 'padding-right' to create the wide background effect, and applied the background attribute to the class. However, this r ...

htmlcsswordpress

Create a darker background for white text using CSS

Looking to showcase multiple images within cards with text overlay. These images are user-uploaded and can vary in color, so the white text must be solid without any transparency issues like in the sample fiddle provided. Check out this example fiddle - h ...

htmlcss

Changing the border color based on field validation status

As I have shared pictures of my form below, you can see the left side with a normal border color and the right side with a red outline indicating an invalid form input. To achieve this through PHP, here is the corresponding code: <?php try { $hand ...

phphtmlcssforms

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

javascriptcssreactjstypescriptmaterial-ui

Expanding SVG Button Overlay in ChakraUI

I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...

cssreactjssvgscalechakra-ui

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

cssangularjsionic-framework

website with a horizontal scroll-bar

Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...

htmlcss

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Exploring the versatility of slots in VUE.js

Can someone explain the different ways slots can be utilized in Vue.js? So far, I understand that slots are commonly used to transmit data from a child component to a parent component for rendering HTML content. Is it also possible for slots to access an ...

javascriptvue.jsvue-component

Vue JavaScript and Making AJAX Requests

I'm currently in the process of transitioning from jQuery to Vue.js, but I'm encountering some challenges when trying to execute an Ajax call using Vue Resource. Here is a sample script that includes both jQuery and Vuejs attempting to access the ...

ajaxwordpressvue.jsvue-resource

How can I make a div blur as I scroll through the page

How can I make each item in my timeline focused one at a time as the user scrolls, instead of having all items in focus simultaneously? Any ideas or suggestions would be appreciated. Here is my fiddle and here is my code $(document).ready(function(){ ...

javascriptjqueryhtmlcsstimeline