I have:
<li class="nav-item">
<b-popover
target="search-button"
placement="topleft"
title="Search"
triggers="click"
content="Placement"
container="nav-container"
>
<template slot="title">Interactive Content</template>
<template slot="content">Interactive Content</template>
</b-popover>
<a class="nav-link" href="#" title="Popover Title" id="search-button">
<i class="material-icons md-48">search</i>
</a>
</li>
I want to add a class to the popover, but ideally have it scoped to this component. When I try to do:
<style scoped>
.nav {
background: white;
border-top: 0.1px solid silver;
}
.nav-pills .nav-link {
border-radius: 0;
}
.popover {
width: 100%;
background: red;
}
</style>
It seems to have no impact on the actual popover.
Version 2.0.0-rc.26 (which is to be released soon) adds support for tooltip/popover variants as well as applying custom classes to the tooltip/popover root element.
You can see a preview at https://bootstrap-vue.netlify.com/ (and will appear at https://bootstrap-vue.js.org/ once released)
Its not possible to give class to <b-popover>, you can read here.
But as I mentioned in comment you can use querySelector and give class or styling.
Cheers.
Related
I'm using Nuxt.js and Bulma. I'm making navigation using Bulma tabs(https://bulma.io/documentation/components/tabs/).
I wanna insert Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable). But it doesn't work in middle of Tabs.
I know who wanna use Bulma dropdown needs to use javascript, so I use it. But it doesn't work.
How can i fix it?
To get a dropdown working inside Bulma's tabs, you need to adjust the overflow CSS in the tabs div. I'm not sure why I had to set overflow-x and overflow-y to get this working properly, but I did.
When the dropdown is active:
overflow-x : visible;
overflow-y : visible;
When the dropdown is not active, reset to their defaults:
overflow-y : hidden;
overflow-x : auto;
Yes you can with a little amount of fiddling
There are mainly 2 problems :-
Problem 1
As bulma tabs container is flexbox, and the list of tabs are child of this flexbox, the dropdown will not be visible as it overflows out of flexbox container.
If you add overflow-y:visible to tabs container div, scrolling will happen which is not the behaviour we need
Solution
To fix this, the contents to be shown on tab selection should also come inside the tabs container as second child, so that dropdown button/link in list of
tabs has the space to show the dropdown when clicked/hovered.
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#content-child {
flex-grow: 1;
width: 100%
}
#list-child {
flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
width: 100%;
}
Problem 2
When dropdown is used within bulma tabs, the anchor tags in dropdown gets styled by those specified for anchor tags in tabs.This is one of the main issue.
The dropdown shown thus will be styled very differently.
Solution
Bulma dropdown also allows us to insert div inside.
We can make use of this to overcome problem 1.
Just add this css for divs inside dropdown so as to make it behave like links.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
Complete solution can be seen below and you can change as required for your use case.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
#content-child {
flex-grow: 1;
width: 100%
}
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#list-child {
flex-grow: 0;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" rel="stylesheet" />
<div class="tabs is-boxed" id="tab-container">
<ul id="list-child">
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
<li class="dropdown is-active">
<div class="dropdown-trigger">
<a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
Drop Down
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">Dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<div class=" dropdown-item is-active">Active dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<hr class="dropdown-divider" />
<div class=" dropdown-item">With a divider</div>
</div>
</div>
</li>
</ul>
<div id="content-child">
content
</div>
</div>
I'm trying to use the Trix WYSIWYG editor on a MaterializeCSS page. Unfortunately the formatting doesn't work since MaterializeCSS overwrites HTML elements like UL with styles like "line-style-type: none". It does provide a style ".browser-default" to reset this but since the HTML elements in the content area are created dynamically I can't really use it.
This is an example snippet:
<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
<ul>
<li>Test Item</li>
</ul>
</trix-editor>
Would anyone know how to make this work and render the UL and LI inside the TRIX-EDITOR with a proper style?
You could override the style only for elements inside the <trix-editor> tag.
Example:
<style>
trix-editor ul:not(.browser-default)>li {
list-style-type: disc;
display: list-item;
}
trix-editor ul:not(.browser-default) {
list-style-type: disc;
display: block;
padding-left: 40px;
}
</style>
<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
<ul>
<li>Test Item</li>
</ul>
</trix-editor>
<ul class="browser-default">
<li class="browser-default">Materialize Browser Default</li>
</ul>
<ul>
<li>Materialize</li>
</ul>
See this jsfiddle for a demo:
https://jsfiddle.net/1jf9m2sp/
I'm trying to understand what exactly data-toggle="dropdown" does in my nav bar and it seems that the primary purpose is for touch screen surfaces, so that when the nav link is clicked, the menu stays open unlike a menu upon hover. (Please correct me if I'm wrong) to my rudimentary knowledge it changes the link to an active link??
So based on the code below when I click on the navbar link which is publications, it stays highlighted, how do I change the color of this highlight?
What line of CSS in bootstrap do I edit?
Thanks!
Update:
Using
.dropdown-toggle:focus {color:red;text-decoration: none;}
on its own doesn't work, I have to add '!important' to the line otherwise it doesn't take effect, maybe conflict with the bootstrap code? Also, what I'm actually looking to do is not the text colour but the background colour. using background:color doesn't work at all for me.
<li class="dropdown">
Publications
<ul class="dropdown-menu">
<li>Submissions</li>
<li>News</li>
<li>Code of Conduct</li>
<li>Useful Links</li>
</ul>
</li>
I assume, if you are looking for color to stay till your dropdown is open, you should use pseudo focus
.dropdown-toggle:focus {
color:red;
text-decoration: none;
}
And if you are looking to change on hover, you can do it using the below code.
.dropdown-toggle:hover{
color: green;
text-decoration: none;
}
You can see in the below example.
On hover it's green and on focus it's red
.dropdown-toggle:focus {
color: red;
text-decoration: none;
}
.dropdown-toggle:hover {
color: green;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
Publications
<ul class="dropdown-menu">
<li>Submissions</li>
<li>News</li>
<li>Code of Conduct</li>
<li>Useful Links</li>
</ul>
</li>
I'm learning angular2 and looking to implement a collapsible sidebar, similar to https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2? I tried looking up examples but couldn't find any. Can you provide examples or documentation for it?
You could use ng2-bootstrap:
https://valor-software.com/ng2-bootstrap/#/accordion
You can also check in the source code how it's implemented:
https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion
Since you want to do it with Bootstrap, you can do it with Bootstrap collapse.
http://codepen.io/zurfyx/pen/ygaGyb
The idea behind this solution is the following:
Have your collapsible content inside a specific class, we called it collapseMenu. We also need a class that will indicate whether it is hidden or not. Bootstrap already provides it for us collapse.
<li>Icon <span class="collapse collapseMenu">Home</span></li>
Next we need the toggler, the hamburger icon that is. It requires a data-toggle to indicate the class that it has to toggle on each click and a data-target to know the element(s) that has to target, collapseMenu.
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
The CSS part is not a big deal, and you can do it in various ways. I like the CSS3 flexbox approach.
Our page (specifically .container), will be a flex with direction row.
.container {
display: flex;
flex-direction: row;
}
Then we'll set the right panel to take as much space as it can, so as when the content is toggled, it shrinks:
.main {
flex: 1;
}
Complete working version:
HTML
<div class="container">
<div class="left-panel">
<ul>
<li>Icon <span class="collapse collapseMenu">Home</span></li>
<li>Icon <span class="collapse collapseMenu">Contact</span></li>
</ul>
</div>
<div class="main">
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
ul > li {
display: block;
}
.collapse.in {
display: inline-block;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
padding: 0;
}
.left-panel {
background-color: grey;
}
.main {
background-color: black;
flex: 1;
}
I'm trying to achieve this effect.
Say we have this structure:
<ul id="menu">
<li>Guides
<ul>
<li>Getting Started</li>
<li>Characters</li>
<li>Epics</li>
<li>Road Map</li>
</ul>
</li>
<li>Skills</li>
<li>Equipments</li>
</ul>
and this simplified CSS:
ul#menu {
display:inline-block;
list-style-type:none;
padding:0;
height:30px; /* So the ul#menu's height isn't changed by the ul#menu>li>ul */
overflow:visible; /* So the ul#menu>li>ul is visible on ul#menu>li:hover */
background: #e69646;
box-shadow:0 2px 3px 0 #666;
}
ul#menu>li>ul {
list-style-type:none;
padding:0;
position:absolute;
background:inherit; /* */
box-shadow:inherit;
}
The problem is that having ul#menu>li>ul on absolute positioning makes it lose it's background gradient and shadow. background:inherit and box-shadow:inherit yield this result.
Is there a way to achieve the desired result?
Thank you in advance guys :)
This is the way I would do it - http://jsfiddle.net/bh6L5/3/
<ul id="menu">
<li>Guides
<ul>
<li>Getting Started</li>
<li>Characters</li>
<li>Epics</li>
<li>Road Map</li>
<div id="fake">Guides</div>
</ul>
</li>
<li>Skills</li>
<li>Equipments</li>
</ul>
Then add this to your css
#fake {
position:absolute;
width:45px;
height:31px;
padding:0 10px;
background: #e69646;
z-index:999;
top: -31px;
left:0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}