I need to put automatically displayed scroll to the input, when there more text than it can show and using overflow: auto; but it is not working and displayed as overflow: hidden;.
I've also tested every possible value in overflow property to
<input type="text"> it is completely ignored, even overflow: scroll doesn't work and displayed as it is set to hidden.
Computed style in chrome is correct, it is NOT overriden by anything! But all works fine with <textarea>.
Is it normal behaviour or am i doing something wrong? If it is normal behaviour, are there other ways to set auto-scroll to the input?
UPDATE:
In empty html file with only input, when overflow set to value, where it should have scroll, it has some more height, when it shouldn't.
input[type=text] is inherently displayed as inline, while textarea is a block level element, display inline-block. overflow applies to block level elements.
As a commenter points out, Firefox inherently displays input text elements as inline. So, to override that behavior, apply either block or inline-block to said input element.
While #xandercoded gives you the right answer of what's going on I would like to provide a "solution" or workaround to achieve what I think the OP is trying to do.
As far as I know, you can't have scrollbar on an input field. But we can fake it in some ways.
What we can do is use javascript to make the input to grow automatically, and then put it inside a container with the overflow:auto. I'll give you an example:
HTML:
<div id="input-container">
<input id="input" type="text"/>
</div>
CSS:
#input
{
border: none; /* remove the border so we fake it better */
outline: none; /* remove the outline so we fake it better */
}
#input-container
{
width: 200px;
overflow: auto;
}
JS:
$('#input').autoGrowInput({ minWidth: 180, comfortZone: 10 });
For the js part, we use jQuery and autoGrowInput jquery plugin.
I made a jsFiddle with this.
Related
I'm using Bootstrap's class collapse to hide an <a> element with a container on a page when first loaded. At the same time I set in my CSS stylesheet .link-group a { display: inline-block } for when it eventually will be displayed. But this of course conflicts and make the element show immediately when the page is loaded - ignoring Bootstrap's collapse.
Example: https://jsfiddle.net/TheStoryCoder/fyyqygm3/3/
What is a good, clean solution to solve this? Would prefer not to use Javascript onload event to hide the element (it could cause element flickering on page load).
PS. The underlying problem is that CSS's display property actually covers two pieces of information: firstly whether or not the element should be displayed, secondly how it should be rendered when it is displayed. Seems to me to be a design flaw in CSS...
The collapse property hides the div, but in your case your other property is making it inline-block. The below code might sort your problem.
.some-links a {
display: inline-block;
width: 80%;
}
.some-links .collapse{
display: none;
}
.some-links .collapse.in{
display:inline-block;
}
The solution is to add style = height: 0px to the element that needs collapse.
Hope this helps.
I'd like to have a hidden <textarea> element on my page to handle user input while displaying it in a custom way. I thought I'd be able to do this by giving it a lower z-index than the element I'm hiding it behind (yes, the element is positioned too) . Indeed, the textarea is hidden appropriately. However... when enough text is entered to necessitate a scrollbar, the resize handle (grip) icon shows up on top of the masking <div>! (At least, on chrome.)
Here's a jsfiddle to play around with.
How can I stop this from happening? The handle doesn't actually allow resizing, so it seems very odd it would pop to the top depending on content length.
Additionally, is there a more canonical way of hiding a text input field?
This should disable the resize handle entirely - but using clip() you could hide the scrollbar
<style>
textarea{
position: absolute;
left:10px;
top:10px;
z-index:-1;
resize:none;
width:200px;
height:50px;
clip:rect(0,189px, 50px, 0);
}
</style>
for those who arrived here looking for a way to hide the resize icon, use:
textarea {
resize: none;
}
I'm trying to create html buttons/labels with text and initially zero width (after insertion, they'll be stretched to be visible, but I want this transition to be smooth). I've tried modifying the initial width and min-width style properties, but no luck.
The following is what I want to work.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.zerowidth{width: 0px;min-width: 0px;}
.nonzerowidth{font-size: 30px;}
button{font-size: 30px;}
label{font-size: 30px;}
span{font-size: 0px;}
</style>
</head>
<body>
<span>
<button>This should be visible</button>
<button class='zerowidth'>I want this to be invisible</button>
<label class='zerowidth'>same here</label>
<button>c</button>
</span>
</body>
</html>
I want the above to appear identical to a version without the .zerowidth elements, such that the .zerowidth elements can have their widths animated to nonzero values later.
If there's an easier way to insert an item into the DOM that allows for smooth repositioning of the elements around it (the above is a toy example - in practice I'll be inserting elements programatically from Dart), I'd be happy to hear that too (though I'd rather stay away from absolutely positioning everything if possible).
Thanks.
To make a button element really zero-width as regards to total width occupied (not just content width, which is what the CSS property width specifies), you need to set horizontal padding and vertical borders to zero. Moreover, to prevent browsers from dividing the content into several lines, you need to prevent line breaks. And you need to make overflowing content hidden; for an element with zero content width, any content overflows, of course. You would thus add the following:
.zerowidth {
padding-left: 0; padding-right: 0;
border-left-width: 0; border-right-width: 0;
white-space: nowrap;
overflow: hidden;
}
For some reason, this is not sufficient for making a label element zero-width (tested on IE, Chrome, Firefox). On the other hand, a label element is for specifying labels of form fields and other labellable elements, and you get nothing but trouble by trying to use it for other content. So consider using e.g. span instead.
<button class='zerowidth'>I want this to be invisible</button>
<label class='zerowidth'>same here</label>
if you want these two things invisible, why not add style="display:none;" to both. And if you want to display them, do a hover effect and display:block; to that element.
I am attempting to make a div element work similarly to that of an input element.
http://jsfiddle.net/MRP5M/6/
I was wondering how the input element achieves the ability to scroll to the side without having scrollbars? I don't want my div element expanding to multiple rows to hold content, but I did not see any CSS properties controlling this behavior on the input element.
UPDATE: All good solutions. Thank you guys for looking into it. It would appear that some aspects of the input element are controlled by the browser (i.e. highlight-to-scroll). It would appear difficult to emulate this functionality without use of Javascript. I've marked the first response as the solution.
Here's the answer: http://jsfiddle.net/MRP5M/12/
There's is one caveat: I'm not sure how to disallow new lines....
You can set "white-space: nowrap;" inside your .editable div
After that, just set a fixed height to your #wrapper (something like 20px) and overflow: hidden;
It will work as I just tried.
The "white-space: nowrap" will avoid any line break, so you don't need to set a fixed width inside your .editable div.
Update: As for the option to select all text with your mouse, Alohci just pointed out on the comments to this post that you can add "overflow: auto;" to your .editable div and it will behave as wanted, at least on Chrome, where I just tried. Alohci also pointed to a Fiddle. Credits to him.
Input fields aspect and behaviour is controlled by the browser itself. You can use CSS to prevent the text from breaking:
See this working Fiddle example!
.editable {
white-space: nowrap;
}
As to scroll without using scroll-bars, you can only achieve either by using JavaScript or altering the HTML as to have an input disguised as a div:
See this working Fiddle example!
HTML
<div id="wrapper">
<input type="text" value="A really long string of content" />
</div>
<input type="text" value="A really long string of content" />
CSS
#wrapper{
width: 151px;
}
#wrapper > input {
border: 0 none;
background-color: white,
color: black;
}
This question already has answers here:
Does element width include padding?
(5 answers)
Closed 7 years ago.
I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.
Demonstration code:
HTML:
<div class="container">
<input class="content" id="Text1" type="text" />
</div>
CSS:
.container
{
width: 300px;
height: 30px;
border: thin solid red;
}
.content
{
width: 100%;
}
Result (Firefox):
This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers.
How do I make the content to exactly fill the width of the div?
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
See here for an icky IE7 compatible method.
You need to reset the paddings, margins and the borders. If you want to apply it sitewide, you can use a reset css like Eric Meyer's : http://meyerweb.com/eric/tools/css/reset/
Or you can write your own. Just default it to your own values
Also add a CSS reset to you page. the input may have some padding added!
When I use your code, it shows fine here on Firefox. I suspect you have an issue with specifity: http://htmldog.com/guides/cssadvanced/specificity/
Or, there is a problem with the surrounding html. I.e. unclosed tag.
Try putting that CSS and HTML into a plain file to see if it displays correctly. If it does, I suggest taking a look at the CSS properties of the parent elements.
If you don't have it already, download the Web Developer Toolbar for Firefox, then use CTRL + SHIFT + F to enable the clickable element property display. This will help you debug what is happening.
Hope this helps.