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();
The Kendo grid I developed has a validation message, but the arrow points to the column to the right. I cannot change anything in /kendo.default.min.css as this is located in a shared folder which should not be changed. Any help on this?
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscount: {
validation: {
required: true,
proposeddiscountcvalidation: function (input) {
if (input.val() != "" && input.is("\[name='ProposedDiscount'\]")) {
input.attr("data-proposeddiscountcvalidation-msg", "Should be whole number between 0 & 100");
// $('.k-widget k-tooltip k-tooltip-validation k-invalid-msg .k-icon k-warning .k-tooltip-validation .k-callout-n').removeClass('.k-callout-n');
return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
} else {
return true;
}
}
}
}
You could try simply overriding some of the styles on the validation tool-tip. This works for me, though I've scoped it pretty tight to try to avoid any unexpected effects elsewhere. You might need to modify it slightly, depending on what version of kendo you're using:
<style>
.k-grid .k-grid-content tr.k-grid-edit-row>td[role='gridcell'] .k-tooltip-validation>.k-callout-n {
left: auto;
margin-left: auto;
}
</style>
Edit: I've just noticed you said you "cannot change anything in /kendo.default.min.css" - you shouldn't need to. This should override the default styles provided by kendo in that file. If you've got your own site-wide CSS file you could add it to that, or even just add it directly to the page hosting your grid (though that's not really recommended). Hope this helps.
The Kendo style default displays the tooltip and places the callout (arrow) in the center of the tooltip. If the message is wide enough, like in your example, because the arrow is in the center it ends up pointing to the wrong cell. If you constrain the tooltip to the width of the cell it will wrap the message and keep it constrained to the cell width, which means the centered arrow will line up.
.k-validator-tooltip { width: min-content; }
I am using DataTables and it is working marvelously. As it works now when you click on the column header (anywhere on the header) it sorts. And toggles between ascending and descending. But the request now is to have two distinct buttons one that would sort ascending and the other that would sort descending respectively, instead of having the whole header be the active trigger.
Do I have to append to each header and add my own buttons or is there something built into datatables that i am missing.
If i do have to add my own buttons, i'd love being pointed in the right direction.
Thanks a million!
well if the point here is just change the default icons for sorting you can just overwrite this classes
.sorting_asc {
background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}
.sorting_desc {
background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}
Unfortunately there is no builtin functionality for this in jquery dataTables. But it is very easy to implement. Here are the steps :
1) Remove the default header icons, in 1.10.x use this CSS
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
background: none;
}
2) Remove white-space wordwrap and ugly outlines as well
th {
white-space: nowrap;
outline: none;
}
3) Create a class that style the buttons
.sort-btn {
padding: 0px;
float: right;
font-size: 10px;
}
4) After you have initialised the dataTable, cycle through the <th>'s. For each, unbind the default click event, add .asc and .desc buttons, and inject events for ordering the column ascending or descending for each button :
$('#example th').each(function(index, th) {
$(th).unbind('click');
$(th).append('<button class="sort-btn btn-asc">▲</button>');
$(th).append('<button class="sort-btn btn-desc">▼</button>');
$(th).find('.btn-asc').click(function() {
table.column(index).order('asc').draw();
});
$(th).find('.btn-desc').click(function() {
table.column(index).order('desc').draw();
});
});
5) The result looks like this :
demo -> http://jsfiddle.net/wyLzgjv5/
I'm new to Sass so I need help with the creation of a mixing for my input fields.
However, if anyone knows of an already made mixin for this or if Compass has one that accomplishes this, please let me (us) know.
I currently have the following CSS rules in my .scss file:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select { ... }
input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
Now, as we know HTML5 provides a nice new set of input types, but right now I don't need to add input types like date, month or week, that's why I don't have them listed "yet".
So in the case I need to add them in the future, I'll update that list you see above.
However, my problem is that I feel I'm repeating myself all over here, plus, the work of selecting items, copying, pasting and editing every time for every new input type I add to the list is just plain dumb and I almost sure Sass' mixins can be of help with this. The problem is that creating a mixin for this is honestly very confusing to me.
I've looked around here and the web for something similar but haven't been able to find anything.
Any help with this is greatly appreciated.
Ok, I eventually found the Sass mixing library Bourbon.
They have an 'add-on' for HTML5 input types (here's a link to the .scss file they created), but it doesn't have the :hover or :focus pseudo elements. So I added them.
I honestly don't know if what I did is the best way to write this mixin, but the thing works marvelously:
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$unquoted-inputs-list: ();
#each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
// :hover and :focus pseudo elements
// Added by Ricardo Zea
// http://ricardozea.net
// #ricardozea
// Tracking: http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields
$inputs-list-hf:'input[type="email"]:hover',
'input[type="number"]:hover',
'input[type="password"]:hover',
'input[type="search"]:hover',
'input[type="tel"]:hover',
'input[type="text"]:hover',
'input[type="url"]:hover',
'input[type="color"]:hover',
'input[type="date"]:hover',
'input[type="datetime"]:hover',
'input[type="datetime-local"]:hover',
'input[type="month"]:hover',
'input[type="time"]:hover',
'input[type="week"]:hover',
'input[type="email"]:focus',
'input[type="number"]:focus',
'input[type="password"]:focus',
'input[type="search"]:focus',
'input[type="tel"]:focus',
'input[type="text"]:focus',
'input[type="url"]:focus',
'input[type="color"]:focus',
'input[type="date"]:focus',
'input[type="datetime"]:focus',
'input[type="datetime-local"]:focus',
'input[type="month"]:focus',
'input[type="time"]:focus',
'input[type="week"]:focus';
$unquoted-inputs-list-hf: ();
#each $input-type-hf in $inputs-list-hf {
$unquoted-inputs-list-hf: append($unquoted-inputs-list-hf, unquote($input-type-hf), comma);
}
$all-text-inputs-hf: $unquoted-inputs-list-hf;
// You must use interpolation on the variable:
// #{$all-text-inputs-hf}
//************************************************************************//
// #{$all-text-inputs-hf}, textarea {
// border: 1px solid red;
// }
As you can see I copied and pasted the original mixing and added the prefix -hf and of course the :hover and :focus to the new rules.
And in my .scss file I added this #import:
#import "html5-input-types"; (no need for the underline _ or file extension .scss)
And in the 'Forms' section of my .scss file I added these rules:
/*Normal state*/
#{$all-text-inputs},
textarea,
select { ... }
/*:hover and :focus states*/
#{$all-text-inputs-hf},
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
I know I have textarea and select outside the mixin file (html5-input-types.scss), not sure yet if I'm including them in it or not, gotta think about it.
Anyway, this worked for me pretty well and although I will still need to update the html5-input-types.scss if anything changes in the future, at least I'm handling these input fields way more efficiently than before.
Hopefully what I did here helps someone else.
And if any of you has a suggestion to improve the mixin, by all means let me (us) know.
Thanks.
In case anyone comes across this for the same reason I did. Why not let SASS do the work?
CodePen
$form-background: #f8f8f8;
$form-color: #000;
$form-border: 1px solid lighten($form-color, 50%);
$form-focus-background: darken($form-background, 10%);
$form-focus-color: #999;
$form-focus-border: 1px solid $form-color;
%input-styles {
width: 15em;
min-height: 30px;
margin: 0 0 15px 15px;
background: $form-background;
color: $form-color;
border: $form-border;
transition: .2s ease-in-out;
transition-property: color, background-color, border;
}
%input-styles--focus {
background-color: $form-focus-background;
color: $form-focus-color;
border: $form-focus-border;
}
#mixin input-styles($styles, $focus_styles) {
$types: 'email', 'number', 'radio', 'password', 'search', 'tel',
'text', 'url', 'color', 'date', 'datetime',
'datetime-local', 'month', 'time', 'week';
#each $type in $types {
input[type="#{$type}"] {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
select,
textarea {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
#include input-styles('%input-styles', '%input-styles--focus');
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!