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.

Make input height increase when typing

I have an input element with a height of 10px and width of 100px. But if the user types in data that is longer than that width, the overflow is not shown. How do I make the input element's height increase when there is an overflow?
Is this achievable with css? If not, then Vanilla JS would be the preferred.
HTML:
<input type="text" id="input">
CSS:
#input{
margin-left: 10px;
border-left: transparent;
border-right: transparent;
border-top: transparent;
border-bottom: 1px solid black;
width: 100px;
height: auto;
min-height: 10px;
}

It's doable, but it's a lot of work. You would need to capture the input on each keystroke and then using the exact same font and size as the input element, create an element on the page somewhere (or rather off the page so no one sees it) using the same content, measure its size and compare that to the input element's size, adjust if needed, then dispose of the other element again.
Personally, I would probably just use a textarea element. It'll have scrollbars if needed, and you can let users resize it if they want.

If you want it to update automatically and want to avoid scroll bar as in textarea. Try using div with contenteditable="true". It will make validation a little difficult but will do the Job. Check out the Snippet:-
div{
padding:0.5em;
background-color:pink;
width:100px;
}
<div contenteditable="true">Edit Me</div>

You can use textarea, you can specify the number of rows that you want and if the user enters more than these rows then a scroll will be shown.
If you want to add the feature of auto grow then you need a little javascript to do it that actually calculate the height of the element based on its content on input event
var textArea = document.getElementById("test");
textArea.addEventListener("input", evt => {
textArea.style.height = textArea.scrollHeight + "px";
});

Fullcalendar displaying at top of page

I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.

I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.

Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.

Overflow:scroll doesn't work when I add content to div

I have a div on my page with the following styles and no content to begin with:
#chatwindow {
width: 500px;
height: 50px;
overflow-y: scroll;
margin: 5px auto;
background: white;
border: 1px solid black;
}
Now, I have a simple Javascript function which adds new lines to the div:
function updateChat(response) {
$('#chatwindow').append('<p>' + response + '</p>');
$("#chatwindow").attr({ scrollTop: $("#chatwindow").attr("scrollHeight") });
}
It's supposed to add a line to the div and scroll to the top. However, after the content within the div becomes too large for the div, the overflow doesn't scroll - it remains invisible beyond the lower border of the div. What do I do (preferably with CSS alone) to make the div's scrollbar show up when the content becomes too large?
Fiddle

scrollTop is not an HTML attribute, it is however a jQuery method, among other things ?
$("#chatwindow").scrollTop( $("#chatwindow").attr("scrollHeight") );
note that scrollHeight is not an HTML attribute either, unless you added it for some reason, hard to tell without the markup, but you're probably looking for the native scrollHeight property
$("#chatwindow").scrollTop( $("#chatwindow").prop("scrollHeight") );

IE8 display:none; to display:block; causes div to overlap footer?

I have a form with errors that appear above it that look like
<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>
And a form inside a <form> with a bunch of inputs inside of divs... nothing really out of the ordinary.
But I have javascript validation on my field with turns the form-error from display:none; to display:block; which resizes the container field fine. The problem lies in the fact there is a footer (also inside a div) that does not move down. If I open up IE8 developer and look at the main container (that wraps everything) it also does not extend. If I for example uncheck the main container width style and then recheck it, it fixes everything.
Is there a way to force IE8 to "resize" their divs when an element inside a div turns from display:none; to display:block;
PS. There is no funny css, no floats, no absolute positioning, nothing that would cause this...
Form Error Block CSS
.form-error {
color: #EB1F25;
}
Footer Block CSS
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
}
.footer-wrapper .links {
width: 960px;
}
After some investigating it seems the inline-block attribute on the container is causing the issue.

Ended up being an issue with display:inline-block; element not resizing. Changing to float worked.

try givin the width to the wrapper. remember the footer should be inside your main wrapper, Also give a height other divs... min-height or something similar.
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
width : 100px;
}

It's hard to tell what exactly is making the problems. But you can test out some of this tips I suggest you to try:
If your .form-error is showing up before (above) the actual <form ...></form>, then try to insert a <br clear="all"/> tag between those two blocks. If not, add clear:all to <form ...> and width:100% to .form-error.
If not, add position:relative and overflow:hidden first to the .form-error, if not helps, add it to <form...> too.
As already said, will be much easier if we could see your entire code, try to use jsbin with your entire css and html source code, because IE is very strict in html rendering.