Make input height increase when typing - javascript

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

Related

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.

How to make a button in html shaped as an ellipse with flat sides?

I need a button which looks like this:
Required Button Shape
However my Button's height and width are in percentage. The only way to do this as far as I could find was border-radius to be half of width (to be specified in pixels) and as my button's width is based on percentage of parent's dimensions i don't the exact value. Putting border-radius as 50% gives a terrible shape. Button with 50% border radius
I came with a JavaScript but it requires an event:
function BorderRadius()
{
var x=document.getElementsByClassName("LoginButton");
x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}
Is there any way to call this JavaScript function automatically or any other solution, using CSS or JavaScript preferably.
Though you'll need to test this in a few different browsers setting the border-radius to be greater than the button height will give you the rounded corners that you are looking for, at least it does in Firefox.
div {
position: relative;
height: 300px;
}
button {
width:33%;
height:10%;
border-radius: 999px;
}
<div>
<button>Hello</button>
</div>
An alternative might be using Viewport Units instead of percentages. This can be combined with calc() and px values to give you minimum sizes.
Viewport Units:
button {
width: calc(100px + 15vw);
height: calc(20px + 5vw);
border-radius: calc(10px + 2.5vw);
}
<button>Button</button>
Just set the border-radius to fixed value and add line-height with same number.
button {
border-radius: 20px;
line-height: 20px;
background: #ccc;
}
<button>Test button</button>
Sarcoma's answer seems the best solution so far.
There is another way too though.
I just added onload="BorderRadius()" to the body.
It called the function immediately and set the shape.

Achieving Absolute positioning without Position attribute, using Margin/Padding

I am working on building Email Based HTML. Now as we know, Position attribute is not well supported in Email clients so i will have to go on without that. Now, looking at my options... i can go for either Margin or padding to position the elements.
The input elements can be relatively positioned or absolute. I'll just take the absolute part for now. So, my input will be for example
One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)
Now, in a normal browser based HTML, these elements would easily be placed on their appropriate positions. But without the position: absolute or even top, left attributes. It get's tricky as the margin attribute arranges the elements relative to the other elements. Here is a sample run:
<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>
Fiddle
My Expected outcome was, all the black divs overlapping each other, placed on the same position. That is possible if it calculates the margins according the the "Parent Element" but it is margining left from parent and top from the previous elements.
So My question now is, Is there a side way of using marging-left, top as top, left attributes and producing the same behavior as they would with position:absolute? Or simply, placing these three elements on top of each other using margin or padding attributes (No position, as it is not supported by Email clients)
I also know, using Divs for email isn't the best approach and i should consider using tables but trust me, the kind of HTML i am dealing with can only be generated using Divs and some playing around with margin or paddings. Any help will be appreciated.
You can use negative margins to achieve overlapping.
margin-top: -50pt
http://jsfiddle.net/pkdqh7kt/1/
Here is an example of stacking your divs horizontally:
http://jsfiddle.net/pkdqh7kt/2/
Also you can check this table to find out which CSS properties are currently supported by major email clients.

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") );

CSS make images the same height as the containing element

This is the markup
img.shadow | div#content |div.shadow
I need to find a way to reliably keep the shadow images the same height as the content area. Problem is the content area can resize (like tabs that have different height, or parts of it that only appear in certain conditions). I was able to set the height of the shadow using javascript on page load, but then as soon as the height of the #content changes... not sure this makes sense, but...
Maybe this explains the problem better
http://jsfiddle.net/uLUnf/28/
The question is
how can I make the images (the grey boxes) resize along with the content (light grey box)?
http://jsfiddle.net/uLUnf/29/
You did it urself? :P
You could put the resize call inside the function that adds the content as well, like this:
jQuery('document').ready(function($){
$('#click_me').click(function(){
var id = $(this).attr('href');
$(id).show();
$('.shadow').height($('#content').outerHeight());
});
$('.shadow').height($('#content').outerHeight());
})()
Or it seems like you could get rid of the shadow images and the call to resize it entirely, and just add a border to the content in the CSS:
#content{
float: left;
display: block;
background: #eee;
width: 200px;
border-right: 7px solid #666;
border-left: 7px solid #666;
}

Categories