I have a read only text-box, its value is coming from database.. I am not sure about text length..client wants that text-box to be dynamic based on content.
Is there any way to do with pure css??
Thanks in advance
<div class="form-item ">
<label class="control-label">Task Name</label>
<input class="form-control form-text" readonly="readonly" type="text"
value="text-box width should change based on my length">
</div>
No, you can't do this with a text input and CSS.
But if it's read-only, why use a text input? Why not create a span and style it to look like a text input?
Related
I can't figure out why my input does not allow me to resize it.
<input type="text">
Example of the problem
I only want to have a working resize on my biginput class.
That's simply because <input type="text"> is ment for a single line.
You'll need to use <textarea></textarea> for this.
<input type="text" placeholder="I can't be resized"></input>
<textarea>I can be resized</textarea>
In order to do this in Google Forms, use the option 'Paragraph Text' instead of 'Text' when selecting an answer.
You need textarea for that :-
<textarea name="entry.585452596" type="text" class="biginput"></textarea>
I'm trying to do something exactly like this sign up form here. They have appended their domain name as undeletable value to allow user to create a sub domain folder. I want to do the same with following input:
<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/>
I found a technique here but I'm not looking to append a prefix. The value must be after like in the example.
It is just a styling trick. input are either completely editable or disabled (not editable at all). There is no way to get around this.
What is done in the form you linked to is a trick where the "frozen" text is placed upon the input field so it looks as if it is a part of the actual input tag, but it is not.
Se my simple jsfiddle illustration. Look at how the styling can be used to create the illusion you want.
Here is an example using Bootstrap 3:
Bootstrap 3 Sub-domain input
<div class="container">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Your sub-domaion here">
<span class="input-group-addon" title="Type of Question">.our-domain.com</span>
</div>
</div>
</div>
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.
I have an html textbox that looks like this:
<div class="control-group">
<label class="required">
Enter stuff here
</label>
<input type="text" placeholder="Required Field" class="form-control" id="secid">
</div>
I do further processing on the 'secid' in the javascript file associated with the html file.
I need to increase the size of the textbox on-the-fly i.e. The more text I write, the input textbox gets bigger. There are questions related to this already such as this and this but none very clear. Could you help me it?
Try
<input size="5" style="font-family:Courier"; onkeyup="Expand(this);">
function Expand(obj){
if (!obj.savesize) obj.savesize=obj.size;
obj.size=Math.max(obj.savesize,obj.value.length);
}
this will increase and decrease textbox size on change.
DEMO
Try This
<input id="Test" size="2" type="text" onkeyup="Expand(this)"/>
And JavaScript as
function Expand(obj) {
obj.size = parseInt(obj.value.length);
}
DEMO