I have this code
...
<div>
<label>Identification:</label>
<input type="text" name="identification" value="" maxlength="20">
<strong class="characters">20</strong>
<p class="description">
<span class="icon_description"></span>Item description
</p>
</div>
...
now it looks like this image
I need improve it to 100% of parent element.
So label could be fixed to specific width and rest of elements to rest of width space.
How to do it by css3 for cross browsers please?
Hi I corrected some code. Following code works in all browsers.
<!Doctype>
<html>
<body>
<div style="width:500px;margin-top:40px;">
<label style="width:86px;float:left;">Identification:</label>
<div style="width:404px;float:right;margin-left:10px;">
<input type="text" name="identification" value="" maxlength="20" style="width:45%;">
<strong class="characters" style="width:10%;">40</strong>
<h4 style="width:45%;float:right;margin-top:0px;">Item description</h4>
</div>
</div>
</body>
</html>
Related
I have to display a text field along with the magnifying glass in the start of the field. It will accompanied by a label to its left and text input to its right. The below is the HTML I have got with the inline CSS
<html>
<head>
<title>Checking</title>
</head>
<body>
<div>
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
Without the label the text box works as I expected, but when I float the label to make the label, input textbox and the result textbox display in the same line, the magnifying glass is displayed over the table. I can move it by changing the 'left' for the div containing the icon. I also have to align the entire set of the fields to right of the screen. Is there a better way to do it?
The below is what i want
Use display:flex with justify-content:flex-end. It solves the issue.
<!DOCTYPE html>
<html>
<head>
<title>Checking</title>
</head>
<body>
<div style="display:flex;justify-content:flex-end">
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
Is this what you are looking for?
label + div {
white-space: pre;
}
body{
float: right
}
<html>
<head>
<title>Checking</title>
</head>
<body>
<div>
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
I've created the following input label/text box, but its huge and runs across the page. Is there anyway I can change the size of the textbox so that it's a lot smaller than it currently is? My code below:
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
PS: I'm doing this in Lightning, so my CSS is already installed. Unfortunately, I'm not allowed to edit the CSS and have to find another way to resize this. I fsomeone can help me out, that would really help.
If css is absolutely out of the question you could always just add an inline style rule. This is generally not considered best practice, but if that's all you're left with you may not have another option.
<div style="width:300px;" class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
<style>
input, button, select, textarea {
width: 100%;
}
</style>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>`enter code here`
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
ISSUE
Using twitter bootstrap 2.3.2 there is an issue that can be seen below.
HTML:
<body>
<div class="container">
<input class="span5" type="text" id="1" />
<span class="span3">...</span>
<input class="span4" type="text" id="2" />
</div>
</body>
To me this should make an input textbox, then ... then another input textbox...however, with bootstrap it makes ... then an input, then another input.
Examples
Example of Error: jsFiddle
Expected Result: jsFiddle
The span classes you are using on the the inputs and ellipsis elements are block elements and are used with Bootstraps grid system to layout your content.
See: http://getbootstrap.com/css/#grid
Solution
Adding the style float:left resolved the weird issue due to span auto adding this float.
HTML
<body>
<div class="container">
<input style="float:left;" class="span5" type="text" id="1" />
<span class="span3">...</span>
<input style="float:left;" class="span4" type="text" id="2" />
</div>
</body>
Demo: jsFiddle
I would like to align the following:
<div class="span5">
<div class="">
<span class="label">Label1</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label2</span>
<input type="text" class="input-medium" placeholder="0" >
</div>
<div class="">
<label class="checkbox inline">
<input type="checkbox"><span>Something</span>
</label>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label4</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label label-inverse">Label5</span>
<input type="text" class="input-medium" placeholder="0">
</div>
</div>
Here's the fiddle:
http://jsfiddle.net/qP46X/1267/
I tried margin right but it didnt help. I am not sure how to align the textboxes together
Use a set width for the .label elements. Ideally you'd have consistency in the layout and you could also use labels for all of the text, but a set width + display: inline-block will work. You can of course change the width as needed.
http://jsfiddle.net/qP46X/1268/
you can also use twitter bootstrap form-horizontal css class and its sub-component classes to fulfill your requirement. i modified a bit styling of your code but you might achieve exactly what you want from the below reference( see Horizontal form in the below link)
Reference: http://twitter.github.com/bootstrap/base-css.html#forms
Demo: http://jsfiddle.net/qP46X/1269/
I just started with Blueprint, so don't bash me :-)
Here's my code, a simple two columns layout:
<body>
<div class="container showgrid">
<div class="span-24 last">
<h1 >Logo Here</h1>
</div>
<div class="span-16">SlideShow</div>
<div class="span-8 last">
<form>
<fieldset >
<label for="email">Email</label>
<input type="text" id="email" name="email" class="title">
</fieldset>
</form>
</div>
</div>
</body>
You can see the result here (on Firefox 3):
http://img600.imageshack.us/i/screenwr.png/
As you can see, the fieldset breaks the grid. If i drop the fieldset, the form gets better, altough it's still one pixel wider. What am I doing wrong?
Thanks for the help.
It's just that the text field is too long. In blueprint, it's set to 300px. Just use CSS to override the text field width and it should be fixed. For example:
.span-8 input.text, .span-8 input.title { width: 275px; }