Here is my example from jdfiddle:
http://jsfiddle.net/7RT7a/
Here is html code:
<div id="product-pack">
<div name="productRow">
<div class="product-title-input">
<p class="titles">Product</p>
<input name="product" type="text" >
</div>
<div class="unit-title-input">
<p class="titles">Unit</p>
<input name="unit" type="text" >
</div>
<div class="quality-title-input">
<p class="titles">Qty.</p>
<input name="qty" type="text" >
</div>
</div>
Here is CSS:
.product-pack {
float: left;
width : 96%;
}
#product-pack input {
width: 95%;
height: 1em;
font-size:1em;
font-weight:bold;
border-style: solid;
background-color:#CCC;
border-color:#999;
border-width:thin;
padding: 1% 0 1% 0;
margin-top: 0.5%;
}
#product-pack .product-title-input, .unit-title-input, .quality-title-input {
float: left;
text-align: left;
}
#product-pack .product-title-input {
width: 82.5%;
padding-top: 2%;
}
#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}
#product-pack .quality-title-input {
width: 5%;
padding-top: 2%;
}
In jsfiddle result, you can see that effect of #product-pack input CSS selector only applies to first input element inside #product-pack and no matter what I try, the other two input elements get no effect.
Am I missing something with CSS or HTML? Any help would be appreciated.
Padding percentages are calculated from the width of the containing block (per MDN). Use px or em instead to specify the padding.
If you're trying to get all the input's to be the same height you have padding differences between the input's parents. specifically here,
#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}
You forgot to add </input> after <input>
Jsfiddle - as you can see here, all of the <input> boxes now are affected by the css styling (they turn yellow)
Related
I tried to create one component that similar to input-group in bootstrap. The reason i was not using the default input-group class of bootstrap is in default I cannot add multiple buttons and input element in input group addon. so i decided to create custom input-group using display-table property but when I use this property some extra space added to top in buttons section.
I need to align the input and counter component in same line.
HTML Part
<div class="product-order-form" matAutocompleteOrigin #origin="matAutocompleteOrigin">
<div class="product-inputGroup tableElem">
<div class="tableRow">
<input class="form-control tableCell" type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [matAutocompleteConnectedTo]="origin">
<div class="counter tableCell">
<div class="counterContainer">
<div class="value-button" id="decrease" value="Decrease Value">-</div>
<input type="text" id="number" value="0" />
<div class="value-button" id="increase" value="Increase Value">+</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.tableElem{
display:table;
width:100%;
}
.tableRow{
display:table-row;
width:100%;
}
.tableCell{
display:table-cell;
}
.product-order-form{
height: 30px;
}
.counterContainer {
width: 150px;
height:30px;
}
.value-button{
text-align: center;
height: 100%;
width: 50px;
background: lightgray;
padding: 5px;
box-sizing: border-box;
float: left;
}
.value-button:hover {
cursor: pointer;
}
input#number{
text-align: center;
height: 100%;
border: none;
width: 50px;
float: left;
box-sizing: border-box;
border-top: 0.5px solid lightgray;
border-bottom: 0.5px solid lightgray;
}
here is my stackblitz
There are two issues here:
.product-order-form sets a height of 30px which means it is shorter than some of it's children / siblings. That would cause issues (try adding overflow:hidden to see it in action)
.tableCell has no vertical-align which would mean it will position itself at the top o/t component. Try adding vertical-align: middle and it should work fine
TL;DR
.tableCell[_ngcontent-c2] {
display: table-cell;
vertical-align: middle;
}
.product-order-form[_ngcontent-c2]{
height: auto;
}
should do the trick :)
I have a label, input and button one line. The width of the label and button are dynamic, they take the width of the text they contain. The label is aligned to the left, and the button to the right.
I want the button to be aligned to the far right, and the input in the middle take up all the remaining space.
I put a float: right on the button, but if I put the width of the input to 100% it goes to the next line and acts like a block element.
What would be the best / easiest way to realize what I'm trying to do here? This is a little bit tricky for me. I'm not sure what to do.
label {
margin-right: 10px;
}
input[type=text] {
width: 355px; /*100% doesnt work*/
height: 20px;
padding: 5px 10px;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
vertical-align: bottom;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<input type="text" id="place" value="Test value">
<button>Click</button>
</fieldset>
JSFiddle Demo
Here's a bit of a hacky way to do it:
table {
width: 100%;
}
.fixedText {
width: 1px;
white-space: nowrap;
}
.relativeText {
width: 100%;
}
#place {
width: 100%;
}
<table>
<tr>
<td class="fixedText">
<label for="place">Any text here:</label>
</td>
<td class="relativeText">
<input type="text" id="place" value="Test value">
</td>
<td class="fixedText">
<button>Click</button>
</td>
</tr>
</table>
Just to show you that you can also do it without tables (although I would probably go for the display: table-cell).
First float the label and the button to the left and right. Add a wrapper around the input. The wrapper gets overflow: hidden which creates a new block formatting context, see http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ for background information. In short this allow the wrapper to take up the remaining space.
Afterwards we apply some fixes to the padding, box-sizing, height and line-height to make it all look good again.
label {
height: 40px;
line-height: 40px;
margin-right: 10px;
float: left;
}
.wrapper {
overflow: hidden;
}
input[type=text] {
width: 100%;
height: 40px;
padding: 5px 10px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<button>Click</button>
<div class="wrapper"><input type="text" id="place" value="Test value"></div>
</fieldset>
Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.
There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit
CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/
Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>
Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.
Here is the sample with textboxes below image: example
I would like my input field to be 98% of the width of the container it is in. The problem is that when I set it to 98% width the input goes off the screen. Is there a special way to define a width of an input or something?
Here is my HTML:
<div class="large-12 columns centered">
<input class="typeahead" type="text" placeholder="Start typing to search" spellcheck="false" autofocus />
</div>
And here is my CSS:
input {
padding: 0.8rem 0.9rem;
height: inherit;
font-size: 1.25rem;
margin: 0 0 .5rem 0;
display: block;
width: 98%;
}
But for some reason, this is the result:
Try providing box-sizing for the input, so that width and height of the input considers padding as well.
input {
padding: 0.8rem 0.9rem;
height: inherit;
font-size: 1.25rem;
margin: 0 0 .5rem 0;
display: block;
width: 98%;
box-sizing:border-box;
}
This happens because the final width of an element is calculated with width + padding + border, this is called box-sizing.
Adding the following CSS should fix it:
box-sizing: border-box;
Use box-sizing should work:
input {
width: percentage you want%;
box-sizing: border-box;
}
I know the title of the question sounds absolutely weird but I had no idea what else to call it.
First off I have a grid layout where I want my .search-wrapper to be 50% wide and floated right. In my demo on jsfiddle the entire .search-wrapper has a green background color. It's important that this element stays the way it is because it should fit into my grid.
Inside this .search-wrapper I have a searchbox and a button both floated side by side. This is just how I want it to be. So the #search-button should be floated left and the input should be aligned right to it.
However the thing I can't achieve is how to float both - the #search-button and the ´inputto the right inside the outer container.search-wrapper`.
The current status …
The way I'd like it to be …
Here is a demo of my problem: http://jsfiddle.net/mQSBR/2/
Any ideas on that? Your help is very much appreciated. Thank you!
See this, if this is the effect you want: http://jsfiddle.net/mQSBR/9/ [EDIT]
div.search { width: 180px; float: right; } /* fix to 180px wide, float to right */
also add:
.search-wrapper {
min-width: 180px;
}
so the wrapper won't go past the .search div when resizing.
Here is the solution in the updated jsfiddle
<div class="wrapper search-wrapper">
<div class="search">
<form action="/" method="get">
<fieldset>
<input type="text" name="s" id="search-box" value="" class="" placeholder="Search this platform …">
<button type="submit" id="search-button">Search</button>
</fieldset>
</form>
</div>
.search-wrapper {
width: 50%;
float: right;
background:green;
margin-top:1em;
}
#search-box {
border: none;
background-color: transparent;
color: transparent;
height: 20px;
float: right;
}
#search-button {
border: none;
background-color: transparent;
color: transparent;
float: right;
background-color:red;
background-position: center -36px;
background-repeat: no-repeat;
}
Right align of search box/button
Also, my proposal is to use placeholder attribute of an element instead of overflowing label
You could do something like this
.search {
float: right;
width: 80%;
}
You can do this:
<fieldset style="margin-left: 20%">
<div class="input-inside-label">
http://jsfiddle.net/userdude/mQSBR/3/
Made a couple of edits to compensate for the overflow-x scroll bar:
#search-button {
...
margin-left: -20px;
...
}
.input-inside-label {
...
margin-left: 0;
width: 70%;
...
}
http://jsfiddle.net/userdude/mQSBR/7/