Incorporating search suggestions into a div with vue 3 and boostrap: a step-by

I am currently experimenting with building a compact search box that offers suggestions using the vue 3 boostrap library. I am aiming to have the suggestions box float on top of the following div without pushing it down. Despite trying to manipulate the z-index, I have not been successful in achieving this.

You can find a code example on Codepen: https://codepen.io/vue_novice/pen/wvxbyMQ

<div id='app'>
  <b-container fluid>
    <b-row align-h="center">
      <b-col cols="4">
        <h1 class="text-center mt-4 mb-4">My Search</h1>
        <b-input-group size="lg">
          <b-form-input placeholder="Type Something"></b-form-input>
          <b-input-group-append>
            <b-button variant="primary">🔍</b-button>
          </b-input-group-append>
        </b-input-group>

        <b-list-group>
          <b-list-group-item>Suggestion 1</b-list-group-item>
          <b-list-group-item>Suggestion 2</b-list-group-item>
          <b-list-group-item>Suggestion 3</b-list-group-item>
          <b-list-group-item>Suggestion 4</b-list-group-item>
        </b-list-group>
      </b-col>
    </b-row>

    <b-row align-h="center">
      <b-col cols="6">
        <h1>I want to be hidden behind the Suggestions 😊</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </b-col>
    </b-row>

  </b-container>

</div>

How can I modify the code to ensure that the suggestion box in the search field overlaps the text below it on the z-axis?

cssvuejs3bootstrap-5bootstrap-vue

Answer №1

To ensure proper positioning, the list group should be set to absolute.

Include the following CSS code in the .list-group section:

.list-group {
  position: absolute;
  left: 15px;
  right: 15px;
  z-index: 1
}

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

I am having trouble with my custom-button class not successfully overriding the btn background color property. Can anyone provide insight

Utilizing the bootstrap5 variant-button mixin, I aim to create a custom-colored button. While I have successfully altered the default hover effect color, I am encountering difficulty in setting the background color of the button itself. Upon inspecting the ...

htmlcsssassbootstrap-5

Will the bootstrap carousel continue running in the background even if I hide it?

Currently, I have incorporated the twitter bootstrap carousel into my website with the following code: <div id="slider" class="carousel slide"> <!-- Wrapper for slides --> <div class="caro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide to Increasing Table Index within Nested Loop in Vue.js 3

How can I increment table indices within a nested loop in Vue.js 3? I am currently working with two-level deep arrays using Vue.js, and I need an index that starts at 1 and increases for each item in the top-level array. The desired output is as follows: ...

javascriptvue.jsvuejs3

Can you modify a specific column in a table using mat-table in Angular material?

For my project, I am utilizing Angular Material's table to present data in a tabular format. However, due to a new requirement, I now need to enable in-line editing for the last 2 columns alongside highlighting another column when the user clicks on t ...

htmlcssangulartypescriptangular-material

Achieve the sticky effect for text in a HTML div using CSS to keep it anchored to the

Seeking advice on how to create a floating box that remains in the bottom right corner of a div using CSS. Any tips or suggestions are appreciated! (Here's an example of what I'm aiming for: https://i.stack.imgur.com/DkD5C.png) ...

htmlcss

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

javascriptjqueryhtmlcsswordpress

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

htmlcss

Adjusting font size to perfectly fit within its confines

When using v-for to map out objects from an array into cards, it's important to keep the height consistent throughout the section. Manually adjusting text size with @media queries can be tedious and inelegant, requiring multiple rules for different sc ...

cssvue.js

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

jQuery slider - display unlimited images

Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...

javascriptjquerycsscarousel

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

jqueryhtmlcssjquery-mobile

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Box-sizing:border-box causing CSS padding problem in Firefox

Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...

cssfirefoxpaddingborder-box

Difficulty in centering certain elements using Bootstrap

I have recently constructed an element for a webpage within the site I am developing. The item is complete, but I am struggling to center it on the page properly. While I can easily center the image, the text associated with it refuses to budge. Here is t ...

htmlcssbootstrap-4