I'm trying to create tabs in bootstrap-vue with one tab containing a dropdown. So far I've managed to create it, but my dropdown menu is restricted based on the tab's padding.
This is a picture of what I get:
!Image](https://i.stack.imgur.com/NsY4V.png)
Here is the example code:
<b-tabs v-model="tabIndex" nav-class="m-0">
<b-tab title="Example" :active-tab-class="headerShowTab(0)"></b-tab>
<b-tab>
<template #title>
<b-dropdown id="dddd-1" text="Example" variant="transparent">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
</template>
</b-tab>
<b-tab title="Example" :active-tab-class="headerShowTab(1)"></b-tab>
<b-tab title="Example" :active-tab-class="headerShowTab(2)"></b-tab>
<b-tab title="Example" :active-tab-class="headerShowTab(3)"></b-tab>
</b-tabs>
Increasing the padding doesn't get me the desired style solution.
Substituting the tabs with a bootstrap code didn't fix the issue, the dropdown didn't work at all because of the project setup. (ref link of the code I used: Bootstrap doc.
My expectation is to get a dropdown that is displayed outside the padding. Can anyone give me an advice how to overcome this issue?
Related
So, I have a Vuetify navigation drawer, and in it I have several list items, among them one containing a slider. Most of the time it works the way I want it, but some times the template element at the back will disappear, including the HTML element in the browser inspection tab. I have not really been able to figure out exactly what triggers this since it's quite rare..
This is how it looks like when it's working..
..and what happens when it breaks!
Here is the HTML code for the list element
<v-list-item>
<v-list-item-content>
<v-list-item-title class="presTitle">Presentation delay</v-list-item-title>
<v-slider
v-model="presentationInterval"
prepend-icon="mdi-clock"
dense
:min="6000"
:max="60000"
step="3000"
>
<template v-slot:append>
<p class="durationText">
{{ (presentationInterval / 1000).toString() + "s"}}
</p>
</template>
</v-slider>
</v-list-item-content>
</v-list-item>
Anyone see any obvious mistakes or why this works 99% of the time but some times break?
<b-tabs>
<b-tab active>
<template v-slot:title>
<b-img src="../assets/logo_big.png"></b-img> I'm <i>custom</i> <strong>title</strong>
</template>
<p class="p-3">Tab contents 1</p>
</b-tab>
</b-tabs>
doesn't work. i don't want to use navbar because i don't want the page to update the url. I was thinking of making a invisible b-tab and putting a clickable image on top however i'm wondering if there is a better way to do this.
I'm learning CSS, but unable to get desired layout using Flexbox and CSS Grid on attached buttons.
I'm practising both Flexbox and CSS Grid at same time. Issue is if the HTML document has button tags already included, the CSS works fine. However CSS is not working on buttons appended to li tag using Javascript/dom. Same issues happening with both Flexbox and CSS grid.
// original HTML file used
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul class="list">
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
The result I'm trying to get is the delete button at the end of the li item (similar to first 2 items, notebook and jello) so that it's all justified at right side.
Any new items entered into list does not display as intended as well. Please take a look at attached link below. Any comments appreciated.
https://jsbin.com/febulokoru/edit?html,css,output
EDIT1: took a look at console again, realised the button was being appended to the textContent(inside the closing li tag). How do I move it out of li and append it after closing li tag?
nested grid can be used to fix layout issue.
instead of appendChild, use insertAdjacentElement method so button is not inside of li tag
I'm trying to use an md-tooltip for a favicon contained within an md-list-item. The intended behaviour is for the tooltip to fire when the mouse is hovering over the icon. Here is the code:
<md-list-item ng-repeat="window in windows track by window.id" ng-click="restoreWindow($index)">
<div ng-repeat="tab in window.tabs.slice(0, 4) track by tab.id">
<img class="tab-favicon" src="{{tab.favIconUrl}}">
<md-tooltip>{{tab.title}}</md-tooltip>
</div>
</md-list-item>
Unfortunately, the md-tooltips fail to fire when using the above code. I've also tried the solution posted here and that didn't work either.
A possible solution involves placing img and md-tooltip inside an md-button, but that makes the spaces between each icon way too large. Overriding the md-button's margin in CSS failed to fix this spacing issue.
I've been having problems trying to work with paper-icon-button with Polymer. My code so far is very simple. The website generates the space that the icon uses and reacts with the right behaviour to respond to the mouse's events but the icon doesn't show up
<paper-toolbar class="gallery_header">
<paper-icon-button icon="menu"></paper-icon-button>
<span title class="flex">Admin</span>
</paper-toolbar>
The scripts that are being loaded in order are:
webcomponentsjs
polymer
iron-icon
bootstrapiron-ajaxiron-imagepaper-drawer-paneljquerypaper-header-panelpaper-stylespaper-icon-buttonpaper-toolbarreact
What you need to do extra in order to make that menu icon appear is to import the iron-icons element which is just a collection of SVG icons. For more information about the iconsets and the iron-icons element, you can check out Rob Dodson's episode on this topic from the Polycasts series.