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/
Related
I'm using vue-good-table and I'm trying to change the labels area in the selected row box. Looking at the documentation the only slot available is the selected-row-actions.
Is there a way/slot to edit the left side with the labels and 'clear' action? (not just their text)
Update:
As mentioned earlier there isn't any direct configuration from library to achieve what you want to achieve. CSS only solution will look like following, take a look at this codesandbox:
<template>
...
</template>
<style>
.vgt-selection-info-row {
font-size: 0 !important;
}
.vgt-selection-info-row__actions.vgt-pull-right {
visibility: visible;
float: none !important;
}
</style>
Original answer:
There isn't any thing like that supported from the library out of the box. You can use table-actions slots to display table level actions on top right or can use selected-row-actions slot to display actions for selected row on the selection info bar like:
<div slot="selected-row-actions">
<button #click="countSelected()">Sected Row Action</button>
</div>
<div slot="table-actions">
Table Actions
</div>
That being said, its HTML we are talking about (yay!) so nothing is preventing you from overriding default styles of the library.
You can use following style to use selected-row-actions slot and move slot next to clear button:
<template>
...
<div slot="selected-row-actions">
<label>Label 1</label>
<button #click="countSelected()">Action 1</button>
<label>Label 1</label>
<button #click="countSelected()">Action 2</button>
</div>
...
</template>
<style>
.vgt-selection-info-row__actions.vgt-pull-right {
float: none !important;
margin-left: 5px;
display: inline;
}
.vgt-selection-info-row__actions.vgt-pull-right div {
display: inline-block;
}
</style>
PS: There is already a closed issue BUG 519 for the library if you like to reopen it and track.
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.
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 am a designer, new to mapbox. (So, I may need things explained to me like I'm a four-year old, pretty please).
I created a map with labels using their plain editor (not Studio) and placed it on my page here.
I want to add a custom legend, possibly in a custom position. I tried using their example, but my map doesn't even show up at all. When I comment out mapbox's CSS link ref in the head, it almost works, but shows all wacky. See that one here.
Here's the added HEAD code per mapbox's legend example that I have on my page:
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<style>
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
.legend label,
.legend span {
display:block;
float:left;
height:15px;
width:20%;
text-align:center;
font-size:9px;
color:#808080;
}
</style>
Then here's the BODY code I added for the mapbox elements.
<div id="legend" style="display:none;">
<strong>The Title or Explanation of your Map</strong>
<nav class="legend clearfix">
<span style="background:#F1EEF6;"></span>
<span style="background:#BDC9E1;"></span>
<span style="background:#74A9CF;"></span>
<span style="background:#2B8CBE;"></span>
<span style="background:#045A8D;"></span>
<label>0 - 20%</label>
<label>40%</label>
<label>60%</label>
<label>80%</label>
<label>100%</label>
<small>Source: Name of source</small>
</nav>
</div>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW1hcm1vbCIsImEiOiIzZTkxMDM4ZDI5MDZiMDY2MzFlOGQ4YzZiYmY2NmMzOSJ9.Cr8JtBNsYIl3LTxYZkaFPA';
var map = L.mapbox.map('map', 'mmarmol.2a3461fc');
map.legendControl.addLegend(document.getElementById('legend').innerHTML);
</script>
All other code is Bootstrap for the rest of my page. It seems like I have a CSS issue, or is it a js issue? Any ideas?
Thank you!