A <span> knows what horizontal size to be without being told. It's horizontal size is no greater than its content.
I'm trying to figure out the CSS to make an <input type='text'> automatically size itself horizontally according to the length of its value, like a <span> would with its innerText.
In other words, without specifying a CSS width: or size attribute on the <input>.
I can't figure out how to do this. Any ideas?
If you want to expand or increase the width of input field as you type you could do something like this
<div>
<span contenteditable="true">sdfsd</span>
</div>
CSS
span{
border: solid 1px black;
}
div{
max-width: 200px;
}
JSFiddle Demo
Or You could accomplish this using some jQuery
<input size="1" />
jQuery
$('input').on('keydown', function(evt) {
var $this = $(this),
size = parseInt($this.attr('size'));
if ( evt.which === 8 ) {
// backspace
$this.attr('size', size - 1);
} else {
// all other keystrokes
$this.attr('size', size + 1);
}
});
JSFiddle Demo
If I understand your question correctly, you want the span and input to be the same width no matter what, correct?
If this is the case then this is the way I would go about it:
Wrap both the span and input with a div
then,
span, input {
display: inline-block;
width: 100%;
}
And set your wrapping div to whatever width you want and the two elements should be aligned (automatically, no matter what) and the same width.
Related
Consider the following markup and styles:
<div>
Some text Some text Some text
</div>
div{
width: 100px;
}
How can I do that the text-content of div have a font-size's property value such that there is maximum font-size value in which text-content of div lie on one line entirely? jsFiddle
Try this:
HTML:
<div id="container">
<span id="text_container">whatever text you want</span>
</div>
CSS:
#container {
background:cyan;
width:200px;
}
#text_container {
white-space:nowrap;
}
JS:
var container = $("#container"),
text_container = $("#text_container"),
start_size = 100,
container_width = container.width();
text_container.css('font-size', start_size + 'px');
while (text_container.width() > container_width) {
text_container.css('font-size', start_size--+'px');
}
DEMO
Do this instead:
div{
min-width: 200px;
}
By setting a minimum width you ensure that the div never gets small enough to collapse the text to multiple lines.
Demo: http://jsfiddle.net/96daR/4/
Give a id to the div, say id="myDiv"
Get height using one of this
javascript:
var myDiv = document.getElementById("myDiv");
h=myDiv.clientHeight;
h=myDiv.scrollHeight;
h=myDiv.offsetHeight;
or in jquery:
h=$("#myDiv").height();
h=$("#myDiv").innerHeight();
h=$("#myDiv").outerHeight();
Next set the font-size using this:
document.getElementById("myDiv").style.font-size=h+"px";
Is it possible with CSS/HTML to resize some box to match exactly it's background image size? Without using javascript.
For instance let's say I have a simplest div:
<div class="image">TEST</div>
.image {
background-image: url(http://placehold.it/350x150);
width: 350px;
height: 150px;
}
And I would like to resize it to those 350x150 dimensions without hardcoding those values. Also I cannot put any content inside this div.
http://jsfiddle.net/5Dane/
EDIT: I see a lot of answers I already was aware of, thank you for them, but that's not the solution here unfortunately. Below I'm explaining why I need such functionality.
What I'm trying to do is a form with steps (buttons previous and next). In session I hold all the values the user has input but there are some buttons which will add more functionality for the user (like multiple dynamically added rows for data). I'm doing it with jQuery of course, but I want the form to be able to work when there is no java script enabled.
Now to the point - I was trying to find out how to tell the difference which button the user has clicked. The case is all my submit buttons need to be images and the simplest solution <input type="image"/> doesn't send info about the button clicked with POST data. That's why I came to this solution:
<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />
/* Submit button with image */
input.submit_img {
font-size: 1em;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
border: solid 0px #000000;
cursor: pointer;
}
http://jsfiddle.net/XRvqV/
This way my form will submit all the data AND I will know which button the user clicked. Also the button looks fine, like it should look. I was wondering though if it was possible to make it a little more portable - my buttons all have different widths for different functions. Can someone suggest another approach here?
No, you can't. CSS is not aware of the the image size. You can do it easily with JQuery.
JQuery exmaple
$(function(){
var bg = $("div.image").css('background-image');
bg = bg.replace('url(','').replace(')','');
var newImg = new Image();
newImg.src = bg;
$("div.image").css("width",newImg.width);
$("div.image").css("height",newImg.height);
});
This is a hack and doesn't use background-image (uses an img tag instead), but is the only way I can think of without using JS.
HTML
<div class="container">
<div class="image">
<img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
</div>
<div class="content">
some text
<br/>
some more text
<br/><br/><br/><br/>
text text text
</div>
</div>
CSS
.container {
position: relative;
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
}
Basically, you allow an img tag to determine the height and width of a container. Then, overlay whatever content you want on top of the image (I'm assuming you want to put something on top).
jsFiddle
i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.
<div class="img-responsive">
<img src="test.jpg" width='xxx' height='yyy' alt='test'>
</div>
You can't do that using just HTML. But you can do this using HTML!
You should try this:
background-size: values;
This way, you will resize the background-image to the size of the container!
You can't do it directly.
The only solution it would be fetching the BG of the DIV element and attach new DOM img element to the DOM node, afterwards you could use the info of the image to add the proper with and height..
if you are willing to use jquery you can do this.
$(function(){
$('.image').each(function(index,element){
var _t = $(this);
_t.data("LinkedImg","LinkedImage"+index);
$('body').append(
$('<img />',{
id:"LinkedImage"+index,
src:_t.css('background-image')
}).hide());
});
$('document').on('load',function(){
$('.image').each(function(index,element){
var _t = $(this);
var _tmp_img = $('#'+ _t.data("LinkedImg"));
_t.css({
width:_tmp_img.width(),
height: _tmp_img.height()
});
});
});
})
I add some content on this div that will be visible on hover.
It work till here: jsbin.com/ipajas/
But as the content is loaded dynamically, I don't know it's exactly the content's height. So I change the height from height:250px; to height:auto;
And the problem is: in that case, the transition don't work anymore. jsbin.com/ipajas/2
Here is the code:
HTML:
<a>
<div class="divabsence" id="id" onClick="expand()">
chose your color:
<p> red <input type="checkbox" id="button"></p>
<p> blue <input type="checkbox" id="button"></p>
<p> green <input type="checkbox" id="button"></p>
<p> white <input type="checkbox" id="button"></p>
</div>
</a>
CSS:
.divcolor
{
width:120px;
height:30px;
background:red;
transition: 1s;
overflow:hidden;
}
.divcolor:hover
{
height:auto;
}
UPDATE
It seems to be impossible so, I've just add this as a temporary solution:
height: 150px; overflow:scroll; jsbin.com/ulodil/4
According to the CSS Specs only length, percentage, or calc are valid types, not auto.
Instead of height you can use max-height with a big enough value:
.divcolor
{
max-height:30px;
...
}
.divcolor:hover
{
max-height: 1000px; <- something just big enough for your needs
}
You could load everything into a <ul> and set the height dynamically based off the number of <li> elements. Depending on how the content is loaded dynamically you could do it through JavaScript or some server-side scripting.
You could add as many or as little <li> elements and the height will adjust.
JSBIN - Sample Here
function adjustHeight()
{
var itemList = document.getElementById('color-list');
var items = itemList.getElementsByTagName('li');
var listHeight = items.length * 25;
document.getElementById('id').style.height = (50 + listHeight) + "px";
}
How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.
I need exactly like how it is shown in this image
Not 100% sure it's the desired effect but for some browsers this might be what you're looking for:
html:
<p>
<label>Test</label>
<span><input></span>
</p>
And css:
label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}
Example: http://jsfiddle.net/48fNt/ (works in at least chrome)
Maybe you also still need to play around with white-space:nowrap and a min-width.
You can't do it alone with CSS. Use
jQuery AutoResize Plugin
$('#myTextBox').autoResize({
onResize : function() {
//Do something on resize
},
animateCallback : function() {
//Do something after resize
},
animateDuration : 300,//Duration
extraSpace : 40//Extra Space
});
As far as I can know, you cannot do it with only CSS for inputs, but you can emulate this behaviour using a div with contenteditable attribute - demo http://dabblet.com/gist/3150040
HTML
<div contenteditable></div>
CSS
div {
min-width: 150px;
width: auto;
border: solid 1px #ccc;
display: inline-block;
}
there are more than one ways you can achieve this position
http://jsfiddle.net/rHqE7/4/
<div id="wrap">
<div id="name">Name</div>
<input type="text" name="fname" id="text" />
</div>
#wrap{width:500px;overflow:auto;}
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;}
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}
So I've got this control I'm trying to make. It's an in-place text editor for a website, and the basic idea is that it will display a label with some text, and when you click the text, the label disappears and a textbox appears in it's place, so that the user can edit the data.
The general layout is something like this (id's and events removed for clarity):
<table>
<tbody>
<tr>
<td>
Some other cell, etc.
</td>
<td>
<div>
<span>When you click me, I'll disappear and show the input instead.</span>
<input type="textbox" style="display:none"/>
</div>
</td>
<tr>
</tbody>
</table>
So the problem is, this setup is pretty fussy and resizes the cells when the span disappears and the input shows up. My overall goal is to be able to set some CSS on the div, span and/or input, in order to get this thing to stay still. I've had a minor amount of luck with position:absolute on the div, however, the text simply overflows it's bounds, and doesn't wrap properly within the cell.
As this is a control, I can move these three elements around as needed, or add other elements, but I would really like to leave the table, tbody, tr and td tags alone.
Any ideas?
Edit:
In the end, I had something like this:
.inPlaceEditor
{
margin-right:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
white-space:normal;
display:block;
width:100%;
height:100%;
}
.inPlaceEditor span
{
white-space:normal;
}
.inPlaceEditor input[type="textbox"]
{
display:none;
width:100%;
border:solid 0px black;
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
padding-top:0px;
padding-left:0px;
}
With a click event handler that looks like this:
function ShowInPlaceTextEditor(_this) {
var div = $(_this).closest('td');
div.css({ height: div.height(), width: div.width() });
$(_this).hide().next().show().focus().selectAllText();
}
And an associated handler that hides the textbox that looks like this:
function HideInPlaceTextEditor(_this) {
$(_this).closest('td').css('height', '');
$(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show();
}
Thanks to everyone who helped.
If you can rely on javascript, wrap a div around everything in that cell. When the page loads, get the current height of that div as it was rendered. Then, assign that height to the div in styles. This way, when you display the input, it should still be propped open by that div with the height assigned to it. I would suspect the input is a little taller than the span with text, so you may need to bump that height up a few pixels.
The only way I know to prevent cells from expanding is to use this...
table { table-layout: fixed; width: 500px; }
table td { overflow:hidden; }
Although, an interesting attempt would be to make the div relatively positioned, and then set the input as absolute...
td div { position: relative; }
td div input { position: absolute; }
Absolutely-positioned elements don't cause expansion, and their starting position is based on the first relatively-positioned parent.
Anything wrong with setting the width/height of the div or the td element? Don't mess with positioning.
During the function that hides the text and displays the textarea, you could sniff for the dimensions of the cell and resize the textbox to match.
<div>
<span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span>
<input id='box1' type="textbox" style="display:none"/>
</div>
<script>
function flip(text, boxID)
{
var box = document.getElementById(boxID);
var parent = text.off
box.style.width = text.offsetParent.offsetWidth + "px";
text.style.display = "none";
box.style.display = "";
}
</script>
Of course, if your text is sitting by itself on a line, it will resize to the full container width, so you might want to set a max width for the box too.
And of course, if you want to use a TextArea instead of a TextBox, you can sniff & set the Height just as easilly (with .height & .offsetHeight, respectively).
Good luck!