I have been using ng-zorro for my angular project, I am using this component: https://ng.ant.design/components/select/en#ng-content
However, I need to set specific with for the options the dropdown displays after it opens, I tried to do this:
> :host ::ng-deep { .ant-select-dropdown {
> width: 112px !important; } }
However, this style also applyes to all the other dropdowns, and I only wanted to give this width to just on dropdown, not all.
I have been looking for other alternative instead of ::ng-deep , but couldn't find one.
I really need to apply with to just one dropdown and not all of them, How can I accomplish this without the issue on ::ng-deep ?
::ng-deep change the style in every component (as you can see) and is deprecated actually (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
You could use ViewEncapsulation.None (documentation : https://angular.io/guide/view-encapsulation)
i am getting crazy in trying with this task:
i have a modal width 75% which has an input
<div id="pippo" class="chips chips-autocomplete"></div>
<label for="pippo">Scope</label>
where basically i want to have the user to get indications of the chips to use according to the autocomplete.
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: tags,
limit: Infinity,
minLength: 1}
});
nevertheless my dropdown content comes with width 120px, which is too narrow and i cannot find how to enlarge or unconstrain.
yes, i also tried $('.dropdown-trigger').dropdown({constrainWidth:false}) without luck (i guess it works on normal dropdowns but not the autocomplete ones?)
does anyone knows the solution?
please see here an image of the issue:
here you see a fiddle of the problem: fiddle
thank you so much
lorenzo
You need to use an !important flag to override, as the css gets applied inline via Javascript:
.dropdown-content {
width:200px !important;
}
I'm using react-select to have a select field on a modal I create with react-modal. The assets are not showing properly as shown in this image (the arrow is not being shown, and the displayable list is not being properly shown).
The modal, has a custom z-index (because it is shown on top of another element that has its own z-index) in this way:
.Modal {
// more stuff
z-index: 81;
}
.Overlay {
z-index: 81;
}
I think this is the problem, but I cannot manage to properly add the z-index to the react select to show ir properly.
I can add the code for the modal and the select if needed.
Well, this solved itself. It results that I was not properly including the css for the select. I included it and it started to show just fine.
I am using kendo multi-select for implementing a tag based selector component. In that, by default any selected tag will appear left aligned. You can see the picture I have attached
Is there any way to configure them to right aligned??
Try adding this style in your page:
.k-multiselect ul li.k-button {
float:right;
}
Or use it as a class if you don't want to change the behaviour of all MultiSelect widgets in your page.
The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
see the ugly circle covering july 6th below...
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
I've already tried
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
any help is appreciated!
Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.
An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
$('.date_field').datepicker({
//comment the beforeShow handler if you want to see the ugly overlay
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
Fiddle
I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).
There is a more elegant way to do it. Add this CSS:
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-index to 101 (one more than the corresponding element). The position field must be absolute, relative or fixed. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index
You need to use !important clause to force the in-line z-index value using CSS.
.ui-datepicker{z-index: 99 !important};
This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.
The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post
To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }
You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }
In my case nothing worked.
I needed to add the z-index to the input type that has the datepicker.
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
The BEST NATURAL way is to simply put the date-picker element on a "platform" that has a "relative" position and has a higher "z-index" than the element that is showing up above your control...
This is for Bootstrap datetimepicker
If your datepicker is hiding because of scroll appears in your div use:
overflow-x: visible !important;
overflow-y: visible !important;
in css of whole div that contain your datepicker and other item such as
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}
Add this:
$(document).ready(function()
{
$('#datepickers-container').css('z-index', 999999999);
};