Develop Reference

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.

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;
}

How can I allow resizable() to increase size beyond initial size?

Is there a way to decouple css's max-height and max-width from the limits used by JQuery-UI's resizable()?
I have a div that, when initially created, should be limited in size:
.my-div {
max-width: 40em;
max-height: 50%;
}
I want it to be resizable beyond its initial size, but unfortunately resizable() seems to use these attributes to also determine the maximum size for resizing. Trying to override that by passing maxHeight and maxWidth options doesn't work. Is there a way to solve this, or some other-work around that will allow me to limit the initial size of the div and later on allow it to increase via resizable()?
I've found an identical question on jquery.com, but it's unanswered there.
A small reproducing jsfiddle - how can I allow resizing the div to see the ".com" suffix, while keeping only the "stackoverflow" word visible at first?

Did you try resetting CSS values via jQuery (not tested) ?
$(".my-div").css({
"max-width": "60em",
"max-height": "75%"
});
Update :
From you fiddle, I tried this :
.my-div {
width: 90px;
max-width: 130px;
overflow: hidden;
background-color: yellow;
}
Could it solve your problem ?

I ended up just implementing the "maximum" logic on the div manually to limit its size, instead of relying on max-width:
if ($div.width() > limit) $div.css('width', limit);
http://jsfiddle.net/yzn5pnhn/2/

Chosen with width equal to the largest option

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%'
});