Chosen with width equal to the largest option - javascript

I'm trying to make the DropDownList with the JQuery-Chosen in it reacts like all others "normal" DropDownLists, matching the width equal to the largest option on the DDL.
I tried some different approaches to get this done, using css and JQuery, but all I tried became ugly.
At the official page of Chosen, http://harvesthq.github.io/chosen/options.html , it says:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
Any way to workaround this?
Workspace: http://jsfiddle.net/cdtn0ko7/
$('.chosen').chosen({
width: 'auto'
});

Try this out for size. :D
Fiddle
$('.chosen').chosen();
.form-control {
width: auto;
}

Not sure if I got the question right, but since you are using Bootstrap, you can just do something like this on the css:
.chosen-drop {
position: inherit !important;
}

I tried using this following code and it worked, check this out:
$('.chosen').chosen({
width: '100%'
});

Related

Angular mat-select don't show option properly on mobile or low width devices

I'm using mat-select in an angular project. When it comes to large screens, the options are shown properly but it is the opposite on mobile or low res screens.
Actually, the options are shown but the text is missing.
I've tried setting the max width of the mat-option with no success.
When i select an option, it is selected and shown properly, but there is no way to know what option is selected.
With images,
Expected behavior:
Current behavior:
Currently, the text with the answers is offscreen to the left. If you make the strings in the dropdown very long, you'll start to see them.
You need to change the following css properties:
.cdk-overlay-pane {
min-width: 200px !important; //or whatever width you want goes here
.mat-select-panel {
min-width: auto !important;
}
}
The !important tags are to override the native material styles.

PHP fullcalendar each day box lower the height

I am dealing with the PHP plugin -- fullcalendar master.
Can I adjust the height of the box?
How? Thanks.
Yes you can set height using
contentHeight: '50px',
The best way to adjust the UI of Full Calendar of any external libraries. Use inspect element and check the class and id by pointing on particular elements. And then perform the change accordingly. You can use inline CSS as well. It will be good if you use "!important" in CSS file.
example
.classname
{
height: 10px !important;
}
or
#id {
height: 10px !important;
}

Scroll both columns as one

My app has two columns, left side being a textarea, while the right side is the result calculated from the text area. But my result column would overflow the fixed window, while textarea would scroll by default.
So I've tried to set both the whole row and its parent to overflow: auto, which let me scroll when I've got enough input, but at the expense of having my separator not full height as well as having a delay after I've wrote into my textarea, before the dix snaps into a bigger height...
My final solution was to use JS & Jquery to check when content is overflown, to alternate between height: auto when it is and height: 100% when its not. That also kinda worked, but with wonky delays yet again...
const editor_js = document.querySelector('.editor');
const $editor = $('.editor');
$('.input').bind('input propertychange', function() {
console.log('Textarea changed');
if(editor_js.offsetHeight < editor_js.scrollHeight){
$editor.css("height", "auto");
}
else{
$editor.css("height", "100%");
}
});
Anyways I am at my wits end. I just want to have my columns consistently scrollable as one entity, while keeping the separator full height at all times. Hope you can give me some suggestions. If you want to directly do some attempts at my app, here's the link
The simplest way for you to get that effect would be to add that vertical border as a pseudo element on the parent. When I say simple, I mean it would be easy to set it and forget it. CSS would deal with it and it would be independant of the size
I think your best option will be to calculate the height of your text area in javascript and set the css style to it.
Then, Make sure you have the following css:
textarea.col-9.input {
overflow: hidden !important;
}
.main-body .editor {
overflow: scroll !important;
}
.col-lg-5.col-md-7.col-sm-8.main-body {
overflow: hidden;
}
I've tried it in Chrome's developer tools and it works well.

Select2 4.0.0 - change inputbox height

whenever I use select2, the empty box is just one line high.
When input is added, the box expands accordingly, but always just the exact amount needed.
How can I change it so my input box is at least 100px high, even if empty? In some cases, I expect the box to be 100px or even higher when filled, so it looks really dumb in my layout, if the box is just 16px high in the first place.
The HTML element to which I'm applying select2() is a Select element with "multiple=multiple" (I need multiple inputs eventually.)
I googled a lot, and also searched in this forum, but nothing worked so far.
I tried including something like this in my custom css file:
.select2-container .select2-choice {
min-height:100px !important;
}
But it didnt't change anything. Maybe those tipps are for older versions of select2? I'm using 4.0.0.
How can I enlarge the box?
Solution:
I added this to my css. It's all about getting the css selectors right (which indeed seem to have changed, recently). I extracted their names by inspecting my HTML output.
.select2-container .select2-selection--multiple{
min-height:100px;
padding-bottom: 50px;
}
.select2-selection.select2-selection--multiple {
min-height: 100px;
}
Tested on the examples page.
I would just pad the select2-choices container a bit so you can still have a dynamic height but be sure that the element can never make contact with the bottom of the container. You can also put the min-height here I think.
.select2-container-multi .select2-choices {
padding-bottom: 4px;
min-height: 26px;
}

jQuery-UI's autocomplete not display well, z-index issue

I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.
In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.
Any help is welcome!
Martijn
Use z-index and !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
In the CSS of jQuery UI:
.ui-front { z-index: 9999; }
Try this, you can manipulate the z-index on runtime or initializing
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.
jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.
So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000
Taken from http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
also have a look at where you are appending the item to.
i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
I was facing same issue, it has been resolved by adding bellow styles:
.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}
Give it a try anyway in your css (before script loading), not in firebug:
.ui-selectmenu-menu {
z-index:100;
}
In my case this works and creates z-indexes like : 100x (for example 1002)
add the following
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
For those developers that still use this plugin. Try this:
.acResults
{
z-index:1;
}
For me was enough with z-index:1, set the value you need in your case.

Categories

Resources