We Keep Coding

Dynamic Sizing of Dialog Boxes

I'm working on a PWA for a chromebook(schools) and I'm wondering what the most best way to have dynamic sizing of dialog boxes.
I have methods set up for each HTML element that we can use and pass the values we need for this (input/checkbox/label) etc - so I have multiple dialog boxes with the same classes but required different sizing.
I have some basic stuff like
.modal {
min-width: 390px;
max-width: 600px;
display: none; /* Hidden by default */
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
border-radius: 6px;
font-size: 14px;
}
I also thought of adding a width value to send when creating the dialogs but I don't like that solution. Something that gets the width of the largest element and adds 10px padding to that or something?
Is there something that I'm missing that could be an easy solution? (It's also ideally vanilla javascript)

If I've understood your question correctly, you are trying to create a class for modal popup windows that will be a different size depending on the content inside, and that you can toggle visibility on using Javascript.
Perhaps too simple of a solution, but have you considered using padding as a replacement for the min-width value in your css?
Something like margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */
This will set the width of the element to 390px(195px padding-left, 195px padding-right) + width of html content, (see codepen below).
https://codepen.io/KXNG420/pen/eYdvZgN
As for setting a max-width you could add in a quick check when you are toggling the visibility of the modal window.
Hopefully this at least helps a little bit.

CSS overflow: auto by 'touching' bottom div

I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).

Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}

I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/

Input field resize

I'm having trouble with re-sizing my search input bar. I've managed to make it re-size when the browser window gets smaller using width:100%;. But I can't get the starting width to be 300px without making it always 300px and then it's goes out of the parent div on resize. For some reason it's 185px;
Here's the jsfiddle of my set-up.

You are embeding your input into a span by calling $('.search2').typeahead. This span has the css-class twitter-typeahead wich is not set to width: 100%;
Add this to your CSS:
.twitter-typeahead {width: 100%;}
Then you need to change your div container css to this (width: 100%; max-width: 300px;):
.div2 {
float: left;
width: 100%;
max-width: 300px;
padding-left: 20px;
}
Leaving width: 100%; on your input is fine!
See the working code: http://jsfiddle.net/utg4mh6z/1/

Just remove all the float: left; and it works. It seems they are not required anyway. At least you don't state it anywhere and floating for 100% width elements makes no sense from my point of view.

Html Table: Word Break AND Limit Td Height?

I am able to limit table cell (<td>) width - I just set the width, and set overflow to hidden. However, I am NOT able to limit table cell height and keep word wrap. If I remove word-wrap, the height stays consistent (nothing forces it, because text just continues horizontally and gets cut off). If I add word-wrap, it seems to ignore the height property and expands the cell vertically.
PLNKR
The goal is to set a fixed table width and height, and then have text wrap (break to next line when reaching horizontal end of cell), but to be cut off vertically when it reaches the bottom. My current styles are these:
<style>
table{
border: 1px solid;
table-layout: fixed;
border-collapse: collapse;
}
tr{
vertical-align: top;
}
td{
word-break:break-all;
width: 80px;
height: 40px;
border: 1px solid;
border-collapse: collapse;
overflow: hidden;
}
</style>
Edit: This is a bonus, but ideally, if an image was placed in a cell, that would get cut off both vertically and horizontally as well, but that's just a "nice to have" and not really part of the q.
Edit 2: Here is an inline-block solution, but it's undesirable, hence not posted as an answer: http://plnkr.co/edit/qvA1wzkEdcrsA2Y9qWdV?p=preview

Figured it out! (Except the answer it a little hokey and only works in CSS3). Using a psuedo after element, and a negative margin, we can trick the table cell into not expanding it's height:
td:after {
content: '';
display: block;
margin-bottom: -10000px;
}
Example plunker: http://plnkr.co/edit/frch27eCDoTBlDEVyUGB?p=preview
Edit:
It seems that -100% will stop the table cell from expanding equal to the height of the table. Thus -100% is not the optimal solution. We'll replace this with a extremely large negative pixel amount. This will fix very long sentences.

I am just posting the "basic"/obvious solution for anyone reading this post later. Put a div inside your table cell, and set width/height to the same size as the cell. Then set the div's overflow and overflow-y to hidden. You shouldn't have any problems with margins/padding/etc, but you can set them to zero if need be.
td{
word-break:break-all;
width: 80px;
height: 40px;
border: 1px solid;
border-collapse: collapse;
overflow: hidden;
background-color:yellow;
}
div{
background-color:cyan;
width: 80px;
height: 40px;
overflow: hidden;
overflow-y: hidden;
}

How can I make my tree view elements overflow past the parent div's width?

I am using bootstrap-treeview to try to make a nice treeview within my MVC project. This control is available on NuGet so its easy to get started with it. The left hand div shows the tree and the right hand div shows the content of each element when clicked:
<body>
<div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
<div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>
There is a slight problem, though. The content of the div with the ID = tree gets cut off:
Ideally, I would like these list elements to overflow to the right, beyond the size of the div with the ID = tree, as you can tell, because I have set overflow: scroll, so I do not want any text to wrap to a new line.
On runtime, it appends list elements as follows...
These list elements seem to have the following CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
I have tried adding white-space: nowrap; to this CSS, which makes the text do what I want (and overflow with a scrollbar), but the background and border of each list element stay at the width of the parent (which is not what I want; I want them to also overflow all scrollable width just like I did with the text)!
What can I do to make each element of this list properly overflow past the bounds of the parent div they all exist under?
Edit: I've tried putting overflow:visible on all parent levels as well, but it did not work. It removed the vertical scroll bar and kept all list item background borders still restricted to the width of the tree div. I also found that setting width = 10000px on the .list-group-item CSS partially gives me what I want as well, but obviously this makes the backgrounds too wide and the scroll bar becomes too elongated. I want the width of all list elements to be equal to the width of the widest overflowing content.

I figured it out. I had to change the display to table-row-group and I had to add white-space: nowrap:
.list-group-item {
position: relative;
display: table-row-group;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
white-space: nowrap;
}

Add overflow:visible to the parent element(s). You may need this at multiple levels, as each parent element could potentially restrict the content.