Is it possible to add dynamic content with css? I'm having a button that shows/hides collapsible content and I would like to display on it "Show less" and "Show all X errors" where X is a number of errors. Right now I've got:
.collapsible_button:not(.active):after {
content: '\02795 Show all errors';
/* Unicode character for "plus" sign (+) */
float: left; }
.banner .active:after {
content: "\2796 Show less ";
/* Unicode character for "minus" sign (-) */
float: left; }
and
<button id="show_more" class="btn btn-secondary collapsible_button"></button>
But I would like something like:
content: '\02795 Show all {{ spreadsheet|length }} errors';
Is there a way to do this with scss only or I need to get js involved?
Related
I wrote a plugin for CKEditor 4 that uses widget and dialog. My widget, simplifying a little bit, consists of a div with a nested ul and a number of li's. For some reason, when I switch from WYSIWYG mode to SOURCE mode, the ul is turned into a double nested ul.
I have defined which elements in the widget should be editables and I have defined which elements should be allowedContent for those editables.
My original structure in WYSIWYG mode (after the dialog closes and the widget is created) is like this:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<li>an example list item</li>
<li>another example list item</li>
</ul>
</div>
</div>
</div>
I have double checked that this is the actual html by inspecting the source of the page in the Chrome Developer Console. But when I switch to SOURCE mode, the structure then becomes:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<ul>
<li>an example list item</li>
<li>another example list item</li>
</ul>
</ul>
</div>
</div>
</div>
The original ul with the class I gave it is there, but there is an extra nested ul wrapping the li elements.
I have defined my allowed widget content in the plugin.js:
allowedContent: 'div(!mycustombox); div(!conditions-box); div(!conditions-services); span(!rwd-line); span(!rwd-line-title); ul(!services-list); li; p; div',
requiredContent: 'div(mycustombox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'mycustombox' );
},
And I have defined the ul element as an editable like so:
editables: {
priceincludes: {
selector: 'div.conditions-box div.conditions-services ul',
allowedContent: 'li em strong'
},
}
I have also allowed ul's to be editable by the general CKEditor instance as so:
CKEDITOR.dtd.$editable[ 'ul' ] = 1;
Is there some setting in the CKEditor configuration which could be causing this behaviour?
Well I don't know if this is the best solution, but it works.
Tell CKEDitor to stop trying to automatically wrap li elements with a ul tag. For some reason it's treating them as though they weren't already wrapped in a ul tag.
Using this at the beginning of my plugin.js fixes the problem:
delete CKEDITOR.dtd.$listItem['li'];
delete CKEDITOR.dtd.$intermediate['li'];
I got the idea from here:
http://margotskapacs.com/2014/11/ckeditor-stop-altering-elements/
Seems kind of hackish to me, but until I find a better solution I'll just use this.
I have a circle+arrow next to a text in a CTA button and i'd like both to change color at the same time when hovering over either of them. Right now when hovering over the text the arrow does not change color, not sure how to write the :
<div class="cta-div">
<a class="cta-btn" href="#" role="button">SAVE NOW <i class="fa fa-
chevron-circle-right " style="font-size:34px;color:#efd43d; vertical
-align:middle; padding:0 0 3px;"></i></a>
</div>
sass rule:
.cta-btn, .fa-chevron-circle-right {
&:hover {
color: $btn-bkg-hover-color !important;
}
}
I have set this up and working in a fiddle: https://jsfiddle.net/roob/9Lsjstf7/1/
Any help is appreciated. If this is a duplicate post then please post a link.
You do not hover on them separately - you just hover on the anchor and when you do that you also hover the child so:
.cta-btn:hover, {
color: #e8e2bb !important;
.fa-chevron-circle-right {
color: #e8e2bb !important;
}
}
Not sure about the !important ... left it as you may need it for some reason.
I would like to use a kendo drop-down list, which has a fixed size since is constrained by other fields in the page, but when it shows the drop-down items of the list, the drop-down area should resize to the maximum length of the items. Sort of fixed width for the item displayed, but auto width for the drop down list.
Something like
|my choice | <-- fixed width displayed on the page
|next choice |
|previous choice | <-- dropdown area to select another item
|dummy |
Is this possible through CSS or drop-down list properties set through jQuery?
You can set the width of a DropDown List both using a CSS or using a method.
If the id of you DropDownList is my-dropdown then you should write:
Using CSS
#my-dropdown-list {
width: auto !important;
}
NOTE: We have appended -list to the original id. The "!important" is important since you want to overwrite original width definition.
Using a method
$("#my-dropdown").data("kendoDropDownList").list.width("auto");
In addition to use "auto" for getting the width automatically adjusted to the text, you can use a fixed width:
#my-dropdown-list {
width: 300px !important;
}
or:
$("#my-dropdown").data("kendoDropDownList").list.width(300);
The above answer didn't work for me. I have a the advantage of knowing that my dropdown is inside of a div.
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
I found that the span has the class k-dropdown so I added the CSS
.myDivClass span.k-dropdown {
width: 300px
}
What worked for me is to render an extra class on the base element:
<input .. class="ExtraLarge ..
Which produced:
<span style="" class="k-widget k-dropdown k-header ExtraLarge" ..
With this ExtraLarge class in place, this worked great in FireFox and Chrome:
span.k-dropdown.ExtraLarge
{
width:400px;
}
Using the following code to be the template of the kendo dropdownlist:
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
you will initiate the kendoDropDownList using jQuery as follows:
$("#myDropDown").kendoDropDownList().data("kendoDropDownList");
Now, to set this controller to take up the full width, what you have to do, is to set the width of the select element to 100%, or whatever is your desire.
e.g.:
<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>
OR, is a css file:
#myDropDown { width: 100% }
If the id of you DropDownList is my-dropdown then you should write:
#my-dropdown-list {
width: auto !important;
-moz-min-width: 120px;
-ms-min-width: 120px;
-o-min-width: 120px;
-webkit-min-width: 120px;
min-width: 120px;
/*max-width: 210px;*/
}
Read the explanation below.
http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width
I have a Zurb Foundation 3 navigation menu. When the page is on a phone, it correctly shows the phone version of my menu system.
However, the only way to activate the menu is to tap the down=arrow triangle on the right. I want to have the title also be active.
EDIT: Added this link to a simple working version of the home page.
Notice, tapping the bar or the word "menu" highlights the bar, but only the arrow makes the menu appear.
I am hiding the name ("Menu") on the desktop and showing it on the phone like so:
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name show-for-small">
<h1>Menu</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
etc.
Since I expect a lot of people will tap on the title "menu" to access the menu I want to make it do the same as tapping the arrow on the right.
IF you adjust:
.top-bar ul > li.toggle-topbar {
cursor: pointer;
display: block;
height: 45px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
and change the width value to:
width 100%;
It will work - in your app.css add:
.top-bar ul > li.toggle-topbar {
width: 100%;
}
The CSS method is one way, but I would up modifying jquery.foundation.topbar.js, line 45 (which is the function below) I changed '.top-bar .toggle-topbar to '.top-bar .toggle-topbar, .top-bar .title'
$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) {
e.preventDefault();
if (methods.breakpoint()) {
settings.$topbar.toggleClass('expanded');
settings.$topbar.css('min-height', '');
}
if (!settings.$topbar.hasClass('expanded')) {
settings.$section.css({left: '0%'});
settings.$section.find('>.name').css({left: '100%'});
settings.$section.find('li.moved').removeClass('moved');
settings.index = 0;
}
});
We have setup the twitter bootstrap dropdown to work on hover (as opposed to click [yes we are aware of the no hover on touch devices]). But we want to be able to have the main link work when we click it.
By default twitter bootstrap blocks it, so how can we re-enable it?
Just add disabled as a class on your anchor:
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b></a>
So all together something like:
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Since there is not really an answer that works (selected answer disables dropdown), or overrides using javascript, here goes.
This is all html and css fix (uses two <a> tags):
<ul class="nav">
<li class="dropdown dropdown-li">
<a class="dropdown-link" href="http://google.com">Dropdown</a>
<a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Now here's the CSS you need.
.dropdown-li {
display:inline-block !important;
}
.dropdown-link {
display:inline-block !important;
padding-right:4px !important;
}
.dropdown-caret {
display:inline-block !important;
padding-left:4px !important;
}
Assuming you will want the both <a> tags to highlight on hover of either one, you will also need to override bootstrap, you might play around with the following:
.nav > li:hover {
background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
color: black; /*dropdown item text color*/
}
For those of you complaining about "the submenus don't drop down", I solved it this way, which looks clean to me:
1) Besides your
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
put a new
<a class="dropdown-toggle"><b class="caret"></b></a>
and remove the <b class="caret"></b> tag, so it will look like
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2) Style them with the following css rules:
.caret1 {
position: absolute !important; top: 0; right: 0;
}
.dropdown-toggle.disabled {
padding-right: 40px;
}
The style in .caret1 class is for positioning it absolutely inside your li, at the right corner.
The second style is for adding some padding to the right of the dropdown to place the caret, preventing overlapping the text of the menu item.
Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret.
I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.
// Medium screens and up only
#media only screen and (min-width: $screen-md-min) {
// Enable menu hover for bootstrap
// dropdown menus
.dropdown:hover .dropdown-menu {
display: block;
}
}
This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.
An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.
You could use a javascript snippit
$(function()
{
// Enable drop menu clicks
$(".nav li > a").off();
});
That will unbind the click event preventing url changing.
Here's a little hack that switched from data-hover to data-toggle depending the screen width:
/**
* Bootstrap nav menu hack
*/
$(window).on('load', function () {
// On page load
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
}
// On window resize
$(window).resize(function () {
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
} else {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
}
});
});
This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:
Posts
<ul class="dropdown-menu navbar-inverse bg-inverse">
<li>Create</li>
</ul>
Now you click the caret for dropdown and the link as a link. No css or js needed.
I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.