How do I make the text box width look uniform across all browsers?
Please help me,
What do you mean a <textarea>?
Then just use css and set the width. e.g.
<textarea ..other stuff.. style="width:500px">
If it needs to be EXACTLY the same in every browser possible, then you will need to use flash or silverlight, as HTML inputs are supposed to be rendered as the user chooses them to be (according to the OS style).
You could do tricks with style to remove the system border and set them to the width you wich in pixels. For example see here: http://freeyourdesign.com/css/css-custom-search-field-or-textfield/
What about setting the width attribute in style
<input type='text' id='txt1' style='width: 100px;' />
Better create a class and apply that to the textbox
<style>
.txtBox { width: 100px; }
</style>
<input type='text' id='txt1' class='txtBox' />
If I understand correctly you are specifying a size in pixels and it is not working (if not, just set a pixel value using "width" in css)?
<input type="text" size="20">
This should be the same size across all browsers, but so should a pixel value specified in a CSS document. Can you post some code and the specific issues you are having with each browser?
Related
Just curious if there is a way to get a tighter layout with bootstrap.
Why is there so much space between the text elements?
Is it all just to accomodate pads, phones, etc?
Is there any way to choose a tighter style for the entire page to default to?
I also think the edit boxes themsselves are too large. There is too much wasted space between the text and the edge of the box.
Why aren't they a bit tighter?
These edits have been added after attempting to use code in answer from NetworkNerd
I have added the following to my stylesheet.
input[type=text]{
padding-top:0px; padding-bottom:0px;
margin-bottom:0px; /* Reduced from whatever it currently is */
margin-top:0px; /* Reduced from whatever it currently is */
height:24px;
}
Those additions make my form look like the following:
You can see that things got a bit tighter, but that is only because of the height:24px style.
The other changes do not seem to have any affect on the look.
By the way, the stylesheet which includes this change is the last one included.
Labels Are Not Aligned
Also, notice that now that I've changed that the labels are not aligned with their associated text input.
Still Too Much Margin Between Text Boxes
And there still seems to be too much margin space between the text boxes.
HTML Code Snippet For Title
Here's a snippet of the HTML which shows the HTML with the applied Bootstrap styles.
This was all just copied from samples on the bootstrap site.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="titleText" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input id="titleText" class="form-control" type="text" ng-model="book.title" />
</div>
</div>
Bootstrap doesn't recommend editing bootstrap.css itself. It is recommended per best practices to modify the bootstrap style in another, dominant CSS file.
Try doing something like this:
Custom CSS
input[type=text]{
padding:0px;
margin-bottom:2px; /* Reduced from whatever it currently is */
margin-top:2px; /* Reduced from whatever it currently is */
}
It's hard to tell from the picture if it's a margin on the top or bottom. You can remove the margin-[top|bottom] based on what the result of your testing is.
It's also possible that the input element isn't the one with a margin, it could be the label element instead (Bootstrap, at least in my experiences, does some strange things with the label element...)
Another edit: I like to give people options. Therefore, if this is in a table element, consider adding the table-condensed class to the table tag to reduce some of the whitespace between items, as shown below:
<table class="table table-condensed">
In Bootstrap 4 you can use the form-control-sm class. See https://getbootstrap.com/docs/4.1/components/forms/#sizing
This is taken directly from the Bootstrap documentation,
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Prior to Bootstrap 4 you could use input-sm. See https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
You can go into the bootstrap.css and find the padding and margin values and change them around or do that in another stylesheet
I want to resize jquery mobile form elements that I am using Phonegap in mobile App. Now I want to resize and give more height to form elements based on some number or percentage which will depend upon screen size. I know jquery Mobile handle width by itself but I want to give height via JS so that all form elements' height increase by that specific ratio/percentage.
I know that JQuery Mobile CSS can be changed but I want to change height using JS on runtime not setting CSS once. So what is best way to do this?
I actually want to get screen size and give size to all elements according to some percentage. While if I see at jQuery Mobile CSS then there are a lot of thing that I need to set, and still not sure if it will be set. So is there some way to do that without modifying or rewrite whole CSS? Or I just need to write custom CSS and form elements ?
Any suggestion and effort will be appreciated.
Here is a fiddle demonstrating this with input elements: http://jsfiddle.net/ezanker/akgEa/
In this example I have 3 inputs of type text and a button which doubles their height each time you click it. The button iterates through each input, gets its current height and then sets the height to 2 times current.
<div data-role="fieldcontain">
<label for="textinput-fc1">Text Input:</label>
<input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc2">Text Input:</label>
<input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc3">Text Input:</label>
<input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>
<input id="btnSet" type="button" value="Set Heights" data-theme="a" />
$('#btnSet').on("click", function(e){
$("[type='text']").each(function( index ) {
var curH = $(this).height();
$(this).height(curH * 2);
});
});
NOTE: depending what type of form elements you are using, setting height will not work for all of them. I suggest you look in the inspector at the generated code for your form and see what is the best way o set the height for each element type.
I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>
As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498
Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.
I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?
The short answer is No.
There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.
The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.
I should mention though, that the <input type=search> field in Chrome will give you a clear button as well, but not on normal <input type=text> fields.
Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link
and about trick behind this:
set background image on input text field and position it to the right corner like
{
background-image: url('imagesUrl');
background-repeat: no-repeat;
background-position: right center;
background-size: 10% 90%;
padding-right: 1%;
}
And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)
You cannot actually do this using css..
But you can user jQuery, and its simple. All you gotto do is this...
HTML code:
<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>
jQuery Code:
$("#clear").click(function(){
$("#myform").reset();
});
And this will work.. But the form tag is necessary.
Y U NO like Javascript? Look how easy jQuery makes this process:
Markup
<form>
<input type="text">
<button>X</button>
</form>
jQuery
$("form").on("click", "button", function() {
$("input").val("");
return false;
});
http://jsfiddle.net/QyE92/
With CSS, you can style the button and position it appropriately to mimic the "x" in the metro interface almost exactly.
<input type="submit" value="Share" />
In Chrome/Safari:
http://img514.imageshack.us/img514/619/btnwebkit.png
In FF:
http://img220.imageshack.us/img220/347/btnff.png
Can someone please tell me why they don't look the same?
Even, when I set the font-size, font-family, padding and margin, the button in FF will always look bigger than the one in Chrome/Safari.
This is because default styles on HTML elements like input buttons and H1 and UL and LI and so forth are subject to the browser developer's whim. You can minimize the disruption by using a reset stylesheet. That said, you may get better results by using <button type="submit" value="Share">Share</button> instead of an input (with a type of button), and setting the styles on that.