Develop Reference

Resize all cards in a row if one is resized

I have four cards that are visible on top of the page. The height of the card changes according to the text inside it. The cards resize when the window is resized as well. I want to make sure that all the cards in a row have the same height.
Stackblitz demo: https://stackblitz.com/edit/angular-xv3syn
What I'm trying to do is to get the max-height among the cards, and set the same height for other cards. What is the best way to achieve this?

Add this in you column item
.col-md-6{
display:grid;
}

you can do this with CSS property display: flex;.

i just change column size now you can see all have same size, you can get this thing by assign appropriate size to each column

angular ui-grid grid height/rows visible

I am using angular ui-grid. I would like to set the height of the grid's contents or the number of rows visible. Ideally, I would like this to set dynamically based on the window size, but, will settle for hard-coding it for now. All of the grids in the ui-grid tutorial appear to have the same height/columns visible so I'm not sure this is possible through UI-grids API.

You have
gridOptions.minRowsToShow .
you can set this to the length of your data. you can set the row height with
gridOptions.rowHeight
You can set the height of the container with css.
.grid {
width: 500px;
height: 250px;
}
so you can calculate the height in pixel
$scope.gridheight=(data.length+1) *rowHeight **
in your controller and set with the style attribute the css height.
style="height: {{gridheight}} px;" //for the container with element with ui-grid
or
ng-style="{'height':gridheight+'px'}"
**data.length+1 because of the label row.

Maximize select width in table when having a label

This looks like one of those things that should have a simple answer, however I could not find any solution for it...
I have a table that contains several select elements, which have some text labels in front, on the same line.
I want to maximize the width of the select until the end of the td element.
I cannot use fixed widths.
If I use width=100% then the select will push the label out on a different line. By default, the select width is equal to the width of the longest option.
Here is how the default works: http://goo.gl/KiSGcK
Ideally, this should work with select2 also, where the default width is set to the width of the first option.
I have tried wrapping the select and/or the label in divs, setting different css options (float, display inline, etc) with no success. Any ideas?

Try to set float: left; for your label and table also. Then set them with width in percent that total is 100%. Like this label(width:40%) and table(width:60% except the border).

Finally found a solution: use overflow: hidden.
Here it is: http://goo.gl/mXNRZN

Dropdown menu css to expand the width based on content

I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.

In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.

Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.

Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>

The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.

forcing a definite size on a select multiple element

When a select multiple element is empty (without any options), the dimensions of the element become zero and shows only the scroll bar , also the element resizes according to the size of the data of the options . How can i create a select multiple element with a definite size which does not change irrespective of the above two factors?
Thanks in advance

Use CSS:
select.multiple {
width: 200px;
height: 400px;
}
The above assumes your select has class="multiple", but obviously you can set your CSS selector to ID or whatever suits, and of course you'll set the dimensions and units to suit your specific case.