no gap (space) between input elements angular - html

I have square component with selector 'app-square':
<input type="text"/>
I have styles for that component:
input[type=text] {
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
}
And i want that there will be no gap between two app-square elements.
<app-square></app-square>
<app-square></app-square>
Now, you can notice a little gap betweet elements:
I do not want that gap between elements, how should i achieve it?

It is generating for you putting the every element in new lines. You can remove it by keep them in same line without white-space like following:
<input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/>
Or by using CSS force:
.clearfix::after {
display: table;
content: "";
clear: both;
}
input[type=text] {
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
display: block;
float: left;
margin: 0;
vertical-align: top;
}
<div class='clearfix'>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>

That is caused by the display property which is set as inline-block by default. It adds a gap between the elements.
So you could use a negative margin, or instead of inline-block float them.
The preferred way is floating them:
.container::before,
.container::after {
display: table;
content: " ";
clear: both;
}
input {
float: left;
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
}
<div class="container">
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
</div>
Don't forget to clear the floating elements using the following css on the container of the floated elements.
.container::before,
.container::after {
display: table;
content: " ";
clear: both;
}

Related

Line break after input using only css

I got a html with a lot of label + input
<label>Application</label>
<input id="ApplicationName" />
...
<label>Foo</label>
<input id="Foo" />
...
<label>Junk</label>
<input id="Junk" />
I force a width to add some consistency
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
With this style it's a bit better but the flow still breaks "anywhere" depending on the width of container. How can I make the label + input to be a block ?
(Without enclosing both of them in a container)
Another acceptable solution would be to
add a virtual carriage return after each input or
before each label.
I didn't succeed to put it after because the input tag doesn't support after.
Neither can I put it before because
label::before {
content: "\A";
white-space: pre;
}
doesn't mix well with label{display:inline-block}
label {
display:inline-block;
width:10em;
}
input {
width:10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
resize the window to exhibit unwanted behaviour
You can use a mixture of floating and clearing, a bit old school but seems to work for the structure:
label {
display: block;
width: 10em;
float: left; /* makes the element act like inline block */
clear: left; /* clears any left floats so before so this should start on new line */
}
input {
width: 10em;
float: left;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Or you could just give a width to your parent container to force the content onto the next line:
div {
width: 21em;
}
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Option #1, CSS-only
If you really can't edit the HTML, then you can apply white-space: pre; and content: "\a"; to the label:before. See this updated JSFiddle.
label:before {
content: "\a";
white-space: pre;
}
<label>Application</label>
<input id="ApplicationName" />
<label>Foo</label>
<input id="Foo" />
<label>Junk</label>
<input id="Junk" />
Option #2, HTML-only
A better solution could be to just wrap the <input>s in the <label>s (another benefit of this, is that you don't need to use the for attribute to link each label the the corresponding input!). Here's a working JSFiddle with your code snippet :)
input{
width: 10em;
}
label{
float: left;
clear: left;
}
<label>Application: <input id="ApplicationName" /></label>
<label>Foo: <input id="Foo" /></label>
<label>Junk: <input id="Junk" /></label>

trying to get the output of a form to display on same line as <p> element html

I'm trying to get certain elements of this form to be displayed on the same line: I want the output of the form to be displayed on the same line as "Total: $ " - (I still want the price per lb ($1.00 in this example) to be displayed on the line above and the number spinner to be displayed to the right). I tried to wrap the whole thing in a <span> that I set the CSS of to be display:inline but it didn't work (& I've tried a few other things as well which also didn't work).
Here's a selection of my code:
HTML:
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>
CSS:
legend { float: left;
margin-top: 35px;
padding-top: 20px;
margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
margin-top: 25px;
padding-bottom: 5px;
margin-bottom: 10px;
}
legend { float: left;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
}
form > * { border:1px solid red; line-height:2em }
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant">
<label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity">
</span>
<span>Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
Get rid of your p tags. Try not to use dispensable containers and classes. Your code would be more readable. You can change the line-height value of form > *

Expand total width of form boxes on one line to 100%

I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>
I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}
You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>
input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>

how to align radio button with image horizontally

i can't get this radio button with image horizontally e.g radio-image,radio-image,radio-image etc.
can someone help me out. The html code is
<fieldset id="CreditCard">
<legend>Credit Card (required)</legend>
<fieldset class="optionGroup">
<label>
<input type="radio" name="ccard"><img src="discover.png" alt="discover card">
</label>
<label>
<input type="radio" name="ccard"> <img src="diners.png" alt="diners card">
</label>
<label>
<input type="radio" name="ccard"><img src="master.png" alt="master card">
</label>
<label>
<input type="radio" name="ccard"><img src="visa.png" alt="visa card">
</label>
</fieldset>
And the css code is
fieldset.optionGroup
{
float: none;
margin-left: 25%;
}
fieldset.optionGroup label
{
display: inline;
float: none;
width: 100px;
}
fieldset.optionGroup input
{
float:none;
margin: 0px;
width: 20px;
}
Fiddle
Use position css rule.
fieldset.optionGroup input {
float: none;
margin: 0;
position: relative;
top: -16px;
width: 20px;
}
Demo
Give this:
fieldset.optionGroup,
fieldset.optionGroup label,
fieldset.optionGroup input
{
display: inline;
vertical-align: middle;
}
Simply add this one line to your css and it should work:
fieldset img{
vertical-align:middle;
}

Align select and input

Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
​
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.