0

I had a Vue electron app, in which Home view component has 3 child components which are in single column one after the other, I have a b-dropdown in middle component when I scroll up the opened dropdown it's hidden under the top first component, How to handle this case?

I need to show the b-dropdown on top of the component not under the components.

enter image description here

HomeView.vue :--

  <div>
      <div v-if="!is_loading && show_service_list" class="home_view_wrap">
        <ServiceList @alertservicelist = "showSessionAlert" />
      </div>
      <div v-else-if="!is_loading && show_information_list" class="home_view_wrap" :key="componentkey">
        <InformationList @alertinfolist = "showSessionAlert" />
      </div>
      <div v-else-if="!is_loading && show_device_list" class="home_view_wrap">
        <DeviceList />
          </div>
      
    </div>

informationlist.vue component code :

<div class="information_list">
    <div class="card text-left" :class="(!show_service_list && !show_device_list && show_information_list) ? 'information_list_card_border' : ''">
      <div class="card-header information_list_header bg-light">
        <label id="id_lbl_link_service_list" class="pb-0 mb-0">{{ $t('notification') }}</label>
        <div class="" v-if="show_dropdrown">
          <b-dropdown id="dropdown-1" variant="outline-info" :text="langConvert" style="color: #17a2b8;" >
            <b-dropdown-item

              v-for="option in options"
              :key="option.value"
              :value="option.value"
              :class="option.value === information_type ? 'dropdown-item-active' : ''"
              >
              {{ option.text }}
            </b-dropdown-item>
          </b-dropdown>
        </div>
      </div>
</div>
Improve this question
3
  • You need to share code that you have used to make this work, without having the code its not possible to share a solution. Commented Jul 3, 2024 at 5:09
  • Updated the code please check , Thank you Commented Jul 3, 2024 at 5:34
  • Share the HTML output! Not some vue component code that cannot be reproduced. Read How to Ask and how to provide a minimal reproducible example. Commented Jul 3, 2024 at 8:13
Related questions
1655
How do I style a <select> dropdown with only CSS?
347
Bootstrap dropdown sub menu missing
405
Avoid dropdown menu close on click inside
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.