I have some HTML that displays a text input and 2 checkboxes side by side. The HTML is generated by a tool and so I cannot alter the way the HTML is built, I can only apply styling to it using CSS. My simplified HTML and CSS is:
<html>
<head>
<style type="text/css">
td {
padding: 0;
}
fieldset {
display: inline;
padding: 0;
margin: 0
}
input[type="text"] {
margin: 0;
padding: 0;
}
table.checkboxs {
border-collapse:collapse;
}
table.checkboxs td {
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" id="item1" value="" />
<fieldset>
<table summary="" class="checkboxs" border-collapse="">
<tr>
<td><input type="checkbox" id="chkbox_0" name="chkbox" value="1" /><label for="chkbox_0">One</label></td>
<td><input type="checkbox" id="chkbox_1" name="chkbox" value="2" /><label for="chkbox_1">Two</label></td>
</tr>
</table>
</fieldset>
</body>
</html>
This ends up with the checkboxes displayed higher up than the text item like this:
What I would like is them aligned together like this:
That seems simple enough, but I cannot figure out how to achieve it. If you remove either the text input or the fieldset then the remaining element takes up the minimum vertical space, it is only when they are together that the text input gets pushed down the page.
By all means point out any shortcomings in the HTML, but as I said that is really not under my control, I can only influence the layout using CSS.
There are two quick solutions I can think of. The first is to get the table to behave and align more like regular text by setting:
table.checkboxs {
display:inline-block;
vertical-align:middle;
}
JSFiddle example
Or by aligning the textbox to behave more like the table:
input[type="text"] {
vertical-align:top;
}
JSFiddle example
Try to give float:left to both of them, input and fieldset and then use margin-top if needed to achieve what you want.
try
input {
display: inline-block;
}
fieldset {
display: inline;
padding: 0;
margin: 0
}
Related
I am not sure how easy this is, but because I usually code in php and output the html, I can do any calculations from there
The problem:
I have a simple form, and I want the input text fields to start right after the labels, but end at the same position. i.e. have a max of date of birth, and then expand everyone up to there
I tried some things with max-width/min-width and width but nothing seems to work
.input_field {
max-width:150px;
width:100%;
}
I would prefer a non javascript solution if possible!
An example using FlexBox: you could also set a width (or min/max-width to the form element (or to ul element)
Codepen: http://codepen.io/anon/pen/oXdbab
HTML
<form>
<ul>
<li>
<label>Label regular</label>
<input type="text" />
</li>
<li>
<label>Label2 really really longer</label>
<input type="text" />
</li>
<li>
<label>Label</label>
<input type="text" />
</li>
</ul>
</form>
CSS
form ul {
list-style: none;
margin: 20px 0; padding: 0;
max-width: 500px;
}
form li {
display: flex;
margin: 10px 0 0 0;
}
form input {
margin-left: 2em;
flex-grow: 1;
}
Result
Final note: Flexbox module is not supported on IE<10. but, on those browser only, you may use a script inside a conditional comment, e.g.
<!--[if lte IE 9]>
<script>
...
</script>
<![endif]-->
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
Im trying to create a text field which is readonly but it should not look like a text field.
The normal readonly text field is
Your name is [ SAM ]
but I want it like
Your name is SAM
That is it should look like the continuation of the sentence and can still act as a text field on to which we can show value (here SAM).
Any way to do that?
What your looking for is this:
HTML:
Your name is <input type="text" value="SAM" readonly="readonly" />
CSS:
input {
border: 0;
}
You can set the input field to readonly in the HTML, this will make it so you cannot edit the field. Then you want to get rid of the border to so it makes it look like its apart of the text. Then customise it as you see fit.
DEMO HERE
Update:
If the input is in a div/span you can just the inputs within that div/span like so:
HTML:
<span class="test">Your name is <input type="text" value="SAM" readonly="readonly" /></span>
CSS:
.test input {
border: 0;
}
DEMO HERE
to style all readonly textboxes apply following CSS rule
input[readonly="readonly"] {
border:0px;
}
It can be done by css. LIVE DEMO
<style>
*
{
font-family: Tahoma;
font-size: 13px;
}
input
{
background-color:transparent;
border:0px;
padding:0px;
}
</style>
this is the <input type='text' value='textbox' readonly >
Set the border, outline and background to none and you'll get the desired effect.
input[disabled] {
background:none;
border:none;
outline:none;
}
It would still take the default min-width though, so you might have to set the width to a smaller value.
DEMO
Add this to your CSS:
input[type="text"], input[type="text"]:focus { border: none; outline: 0; }
Yes, why don't you use CSS for this?
Add:
input[type="text"] { border: none; }
Also an option: adding background transparancy as stated above.
<input type="text" value = "Your Name is SAM" readonly= "true" style ="border: none" name="name"/>
Set the Border to 0px and the background to transparent, This should be work.
In CSS file:
*
{
font-size: 14px;
font-family: Arial;
}
input[type="text"]
{
border:0px solid red;
background: none;
}
In HTML file:
Hello <input type="text" value="John">
I want to display a span element over an input element with CSS. How can I do this. My current code:
<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>
How can I display the span element on the input element so that the users know there is no need to enter http:// so it would look like if there's already a value in but then it is the span element on the input? I assume I can do that with CSS positioning.
I cannot use placeholder as I don't want it to be removed.
As you have mentioned you need to use positioning and wrap your input with span into div or some other element.
.wrapper {
position: relative;
}
input {
padding-left: 48px;
}
.wrapper span {
position: absolute;
left: 2px;
}
<div class="wrapper">
<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>
</div>
Example
This is a bit of an old post, but there is a more simple way of doing this and without using positioning. Wrap each element of the form in a list item and set the display to 'inline-block' and the display of the span to 'block' like this -
li{
display: inline-block;
}
li span{
display: block;
}
You would then need to swap the order of the html elements like so -
<span>http://</span>
<input type="url" placeholder="e.g. www.google.com" />
You could however leave it the same if you wanted the span to display on the bottom of the input element.
something like this: fiddle
* {
font-family: Arial, sans-serif;
font-size: 12px;
}
.row {
position:relative;
}
.row span {
position:absolute;
left:5px;
top:5px;
}
.row input {
padding-left: 40px;
line-height: 16px;
}
<div class="row">
<span>http://</span>
<input type="url" placeholder="e.g. www.google.com" />
</div>
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}