Make DIV element contain text like that of an input element? - html

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

Related

Html input completely ignoring overflow property

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.

Create html button/label with text and zero initial width

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.

Content of div is longer then div itself when width is set to 100%? [duplicate]

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.

Why are these divs overlapping?

I putting wmd on my website. After putting code in and giving it a spin i see this image below.
How can i make the preview div not overlap with the textarea? -edit- the black is the css background of div wmd-preview
some html
<div id="wmd-editor" class="wmd-panel"><div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="body" rows="10" cols="89"></textarea>
...
</div></form><div id="wmd-preview" class="wmd-panel"></div>
Try adding a "Width" property value and "Float:Left" property value for the wmd-panel class.
width: value;
float: left;
If this does't work (and only if it doesn't work) trying setting a high margin-top value on the wmd-panel class. I.e.
margin-top: 25px;
Have you tried increasing the z-index of the preview div?
#wmd-preview { z-index: 100; }
Set the floats or if you need to be stingy set the "wmd-editor" as absolute positioning, for either just IE or all. I know its not the most effective way but it can be the easiest in some cases ^^

How do I keep a DIV from expanding to take up all available width?

In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?
Edit: One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
Edit: If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
.pictureframe {
display: block;
margin: 5px;
padding: 5px;
border: solid brown 2px;
background-color: #ffeecc;
}
#foo {
border: solid blue 2px;
float: left;
}
img {
display: block;
}
<div id="foo">
<span class="pictureframe">
<img alt=''
src="http://stackoverflow.com/favicon.ico" />
</span>
<p>
Why is the beige rectangle so wide?
</p>
</div>
The right way is to use:
.pictureframe {
display: inline-block;
}
Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed.
For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
Yes
display:inline-block is your friend.
Also have a look at: display:-moz-inline-block and display:-moz-inline-box.
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
Here is the pictureFrame CSS for this example:
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.