I found a bug in PrimeNG pFocusTrap.
Basically when tabbing through focusable elements, focus will get stuck on an element whose ancestor is display:none. Here is my fix:
$displays: inline inline-block block grid table table-cell table-row flex inline-flex;
$tabbable: 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
#function d-size($size) {
$ret: ();
#each $n in $displays {
$ret: append($ret,'.d-'+$size+'-'+$n,'comma');
}
#return $ret;
}
.d-none:not(#{d-size('sm')},#{d-size('md')},#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-sm-none:not(#{d-size('md')},#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-md-none:not(#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-lg-none:not(#{d-size('xl')}) *:is(#{$tabbable}),
.d-xl-none *:is(#{$tabbable})
{
display: none !important;
}
Basically it applies display:none to any tabbable descendant of any elements that are using bootstraps d-xx-none utility.
My question is: I'm pretty new to SCSS, but is there any way to refactor and optimize the lines of code, and are there any bugs I may have overlooked?
Related
I use kendo-ui dropdown.
I add some ovveriding-css, and it works well.
.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element
.k-popup.k-list-container {
.k-item,
.k-item.k-state-selected,
.k-item.k-state-focused {
background-color: transparent;
color: $darken-gray-color;
margin-left: 0;
margin-top: 0;
}
}
}
The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo.
What say - when you ovveride the list-container style - dows it for all of the combooxes.
Is there any solution for this issue?
Well this is a known problem, for every popup kendo renders independent div with class k-animation-container
You can try with this solution suggested on telerik forum:
k-animation-container
$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
var animationContainer = $(".k-animation-container").last();
// use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
if (true) {
animationContainer.children(".k-popup").css("min-width", 200);
}
});
Didn't try it my self, gl.
One solution I found was to use
popup: {
appendTo: $(some parent with ID)
}
This way we can manipulate styling of that particular .k-animation-container.
But this doesn't work on every widget, unfortunately.
My team find a great solution:
There is an option to give the input-element custom id.
Then you can select the list-container by the custom id you gave +'list' str.
Now, if you want to get the k-animation-container, you can select the list element and then request its parent.
Code sample:
The input element:
<span
kendo-multi-select
id="my-type-dd"
k-options="$ctrl.getVMultySelectConfig()"
k-ng-model="$ctrl.selectedTypes"
></span>
Selectors:
If you need only the k-list-container and not must the k-animation-container, you can do that by css:
.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'
&.k-popup.k-list-container {
padding: $space-normal 0 $space-small $space-small;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
}
}
If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:
var kAnimationElement = $("#my-type-dd-list").parent();
Given the HTML :
<div class="parent">
<div class="element"></div>
<div class="other"></div>
</div>
And this Sass :
.parent {
.element {
#include span-columns(2.5 of 8);
}
}
It generates the CSS :
.parent .element {
float: left;
display: block;
margin-right: 3.22581%;
width: 29.03226%;
}
.parent .element:last-child {
margin-right: 0;
}
The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?
I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.
Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.
If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!
When changing the background-color, CKEditor wraps the selected content in a span element where the inline style is set.
I have an application to create interactive videos: it is possible to stop the playback in desired moments and, in these pauses, the viewer can jump to key moments of the video, or answer to quizzes, returning to specific points of the video if the answer was wrong, and so on. To create this interactive layer above the player I use the CKEditor with some custom plugins to create the interactive elements.
One of the plugins is used to create span elements with a custom attribute data-player-control:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">My element</span>
The value of the data-player-control attribute is not fixed (it can be specified in the plugin), and it is used to control the exhibition of the video.
When the editor is used to change the element background color, it wraps the element text in a new span, what results in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">
<span style="background-color:#FF0000">My element</span>
</span>
These two nested span elements, with two distinct background colors, are undesired.
What I need is the inline style to be applied to the existing span element, resulting in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play" style="background-color:#FF0000">
My element
</span>
How can this be achieved?
Using dataFilter or htmlFilter is not a feasible solution, as they are executed in input or output data, when entering or existing the inline instance of the CKEditor. Using a transformation also is not a solution, as it uses a simplified form to represent the elements, not the real DOM.
Is there any callback function to use while editing the content (so I can change the DOM according to my needs)?
A simple solution is to listen to the change event in the editor instance and then modify the DOM in event.editor.ui.contentsElement.$ as desired.
You can try to use custom styles definition which is used for adding background-color. The colorButton_backStyle can be set in the editor config.
To override span element with some custom attributes, you can use:
config.colorButton_backStyle = {
element: 'span',
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So basically overrides attribute is used when applying background-color and there is a span with such attribute - it is replaced (but then the attribute also gets removed ). You can add attributes:
config.colorButton_backStyle = {
element: 'span',
attributes: { 'data-player-control': 'play' },
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So that overriding span also has your attribute. The problem with this solution is that:
When applying background color to other elements, span will also have data-player-control attribute.
When removing background color, the whole span gets removed.
The above solution may not fit your needs. Maybe there is different approach to the problem you are trying to solve?
As I understand from the question you would like the HTML to have defined structure the whole time (not only as output data), is that correct? What problem is structure with nested spans causing in your application/implementation?
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!