Unable to resize the textarea height - javascript

I've noticed a strange bug while using a textarea in a my project.
At first I thought there was a problem in my code but then I was able to replicate that bug extracting the essenial in a JsFiddle .
The problem is:
If I change the height of the textarea by code without any interactions from the user before, the height get stuck at that size.
For example, if you click to the button "Change size" (in the jsfiddle above) and then try to resize back to the initial size using the element grip (at the bottom-right corner), you can't. It's like if that new height is the new ''minimum allowed size'' of the textarea.
What am I doing wrong? what am I missing?
Thank you in advance.

Height overrides min-height in Chrome.
In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to
set min-height and max-height only. Height overrides min-height in
Chrome.
textarea{
max-height: auto;
min-height: 50px;
resize: both;
}
Okay this solution works for me (chrome Version 47.0.2526.111 m):
https://jsfiddle.net/ezsz8xr5/9/
I found this interestining link: https://code.google.com/p/chromium/issues/detail?id=94583
Seems that it is a known issue.

I know this question has been asked a while ago, but there's no good answer to it, and I found a solution.
What I found is that putting a % height for the textarea will not change it according to its parent.
If you put the rule resize: vertical, changing manually the height you'll notice that your browser will put the style.height in pixels.
So I tried putting height: 150px and it worked.
So here are two solutions :
First, put your textarea's height in pixels, not in percentage.
parent {
width: 150px;
}
parent textarea {
height: 100%; /* not working ! */
}
/* Instead, do : */
/* css variable */
:host {
--height: 150px;
}
parent {
height: var(--height);
}
parent textarea {
height: var(--height);
}
For a SCSS way :
parent {
$height: 150px;
height: $height;
textarea {
height: $height;
}
}
Second, declare the textarea parent's display as flex, and without any additional rule, it will automatically resize your textarea. If it does not, then do this :
parent {
display: flex;
/* if flex doesn't work by itself, add this + textarea rule : */
flex-flow: column nowrap;
}
parent textarea {
flex: 1; /* tells the textarea to fit all the free space it finds */
}
It seems like a browser issue yes, still not fixed in 2022, sadly. If it is intentional, then it's even not documented.
Hope this will help someone in the future.

Related

How to set 100 % height without having a vertical scrollbar?

Context
I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden
The Problem
When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem.
100vh also won't work without having a scrollbar.
Here is the css for setup the height (#__next is just a div where next.js renders the page):
html,
body,
#__next {
height: 100%;
width: 100%;
}
The navbar is just a fixed pixel height, and the space below has height: 100%
Here is a screenshot that shows the vertical scrollbar:
I can't find any problems on the chrome inspector.
This is how it should look (design file):
Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)
Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:
#__next{
height: calc(100% - navbarpx);
...
}
calc()
For the padding issue you can look into border-box.
I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.
So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.
One of the ways is to use flex-box, it allows you to explicitly say(take all available height.
.body {
display: flex;
flex-direction: column;
}
.navbar {
flex: 30px 0 0;
/* 30px height and do not grow or shint */
background: red;
}
.content {
flex-grow: 1;
/* take all available space */
background: blue;
}
.body, html, body {
width: 100%;
height: 100%;
}
<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>

Gallery images overflow to left

I am working on a carousel - gallery viewer for my website and I have problems with the elements in it.
The images at the bottom are overflowing but only to the left. I have set the overflow property to hidden but it does not seem to work in this side.
In addition, the images are not affected by the property margin-right for some reason, only by margin left.
Here is a demo of the image viewer: http://codepen.io/anon/pen/XbgdWo
This is the code I am using for the image items. I use margin-right to show it is not working properly.
.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
#include transition('all .2s ease-in-out'); }
.slider-item:hover {
img { #include transform(scale(1.1)); } }
I would really appreciate if you could have a look at it. I have no idea what to do to fix it.
Thanks in advance.
You don't need to have the overflow:hidden on the image itself, just the containing element - which you have.
The effect you are after works fine, you just have an issue with margin - you have put it on the img when it should but on the parent (.slick-slide).
I have forked your codepen here and fixed the issue, I added a red background to the img container so you can see the changes, the code is still messy but it gets the job done. I will continue to refine the code in the same pen.
Your body has 80 percent of width.
First of all, add the following CSS to the body to make it appear properly.
body {
width: 80%;
margin: 0 auto;
}

using jquery scroll on ie11 issues with jittery elements

I just encountered a strange issue on ie11. I am trying to create a fixed element that will scroll along with window scroll.
$(window).scroll(function() {
var scrollY=$(this).scrollTop();
$('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});
I have also created a fiddle of this:
https://jsfiddle.net/fyngwnz6/1/
(This is for replicating the issue, I know this particular case could be solved with a fixed element)
The code works flawlessly with no performance issues on every browser, except ie11. When using the scrollbar 'myelem' element scrolls with just a small jitter which becomes more obvious when using the mouse wheel. However, where you can really see the issue is when using the scrollbar buttons. It seems like the render of the scrolling has to finish in order for js to track the scroll.
I saw that there were issues with ie11 and smooth scrolling, but this is not the case here. Is there any kind of solution to this? Am I missing something?
edit: although I have an answer that seems to solve the issue, actually what I am looking for is a solution to elements that have overflow:hidden applies on them and the scroll is taken from an overflown element rather than body scroll; a similar scenario can be found here:
http://www.fixedheadertable.com/
If 'fixed column' is enabled in the example, then clicking on the scrollbars shows the jerkiness in the movement.
It seems like adding height: 100%; and overflow: auto; to the html, body elements removes the IE 11 issue:
JsFiddle Demo
[Edit]: Adding margin: 0; removes double scrollbars.
for edge use:
/*Edge - works to 41.16299.402.0*/
#supports (-ms-ime-align:auto)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative;
}
}
/*Ie 10/11*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative
}
}

CSS body 100% height and overflow when necessary

I know how to ensure that the HTML body vertically stretches/shrinks to 100% height of the browser viewport (by having 100% height in the body and html rules).
I also know that normal HTML flow will result in containers vertically stretching to contain their contents (if things are set up properly).
Yet, I cannot seem to achieve both.
I.e. I cannot beat CSS into ensuring that when my page is viewed on a high resolution screen that it vertically stretches to leave no gaps AND to ensure that if my page is viewed on a lower resolution screen that the body stretches past the viewport (to accommodate all the content) and introduces scrollbars.
To me that is ideal behaviour and yet I sadly believe that this cannot be achieved purely in CSS. I know I can do this in JavaScript quite easily, but I want to be able to do it just in CSS.
Is it possible, or am I forced to use JavaScript?
Edit:
I have researched, tried and test so many techniques, but it just seems like it can't be done. Looks like I am going to have to go back to JavaScript.
OK so this definitely works for me:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
}
#wrapper {
width: 100%; /* Necessary because of side-effect of flex */
height: 100%;
}
Exactly what I tried before, but I thought I would give this new CSS feature "flex" a go and it has done the trick. So it looks the CSS managers/creators have finally addressed these critical issues with dynamic height and vertical centring.
I hope this helps someone else stuck on this issue.
You can use the min-height css property.
html, body {
min-height: 100%;
}
min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/
Taking inspiration from a question which seems to be pretty much the same as mine: Make body have 100% of the browser height
This is working for me:
html {
height: 100%;
}
body {
min-height: 100%;
}

how do I make a resizable scrolling text box in a fluid layout?

I've tried using Dreamweaver's standard fluid layout, and modified it with 10% column widths and 24 columns on the desktop design. I've tried creating a div within a div (bear with me, I'm a noob at Dreamweaver), and set the constraints of the text box to be within the outside div, and haven't been able to come up with a solution on that front.
I tried to set the parameters of the text box itself but that doesn't work either because of the conflict of % v. px. In the fluid layout, I'm using % for the resizing to work.
In essence, the issue lies within being able to set the vertical constraints on the text box to be in proportion for when the screen size changes; horizontal is fine because I can just set the width constraint in Dreamweaver's design module.
I'm thinking that I'll have to set it up through a javascript of some sort; although I know nothing about java except to pluck code from someone who's built it and plug it into the site.
Sorry for the rambling nature of this post, and I hope it makes sense.
I was helping you in your other question regarding jQuery and I decided to snoop around and found this question. I understand you want a fluid height for a text box in a column. That can be achieved like this:
CSS:
/*
In order to use width/height: 100% on the body and html
You need to remove the margins and padding on them, otherwise
you'll see a vertical and horizontal scroll bar, which is awful.
This way, it removed margins and paddings on everything, ultimately
leading to better styling overall.
*/
*
{
margin: 0;
padding: 0;
}
body, html
{
width: 100%;
height: 100%;
}
/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
width: 100%;
height: 100%;
}
/* The column that the textbox will be inside */
#someColumn
{
width: 50%;
height: 50%;
margin: 5px;
padding: 5px;
}
#someColumn textarea
{
width: 25%;
height: 50%;
/* The textbox will now be 50% the height of #someColumn */
}
HTML:
<body>
<div id="wrapper">
<div id="someColumn">
<textarea></textarea>
</div>
</div>
</body>
Here's a jsFiddle to see what it looks like

Categories

Resources