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 :)
Related
I am looking to show an error message below a text input like so
The message should not extend any wider than the width of the input, so I was thinking could I inherit the width of the input on say a span that sits below it?
Something like:
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<p style="width:inherit;">Some Error Here</p>
</div>
My current attempt - http://jsfiddle.net/4eu2qkra/
I know this sample above will not work, and usage of inherit is wrong here since it will be looking to use the width of the parent div.
Is there a pure css way to inherit from a sibling element immediately before a target element? Maybe I'm going about this all the wrong way?!
Use your wrapper DIV to control the width of the input and the error message. Make sure that the input has width: 100%; so that it will fill the wrapper DIV.
<div class="control-wrap">
<input type="text">
<p>Error Message. Error Message</p>
</div>
* {
box-sizing: border-box;
}
.control-wrap {
width: 50%;
padding: 5px;
background-color: red;
border: 1px solid #666;
}
input {
width: 100%;
border: 1px solid #666;
}
p {
margin: 5px 0;
}
jsFiddle: http://jsfiddle.net/2krc8tyL/
You can wrap the input and error message in a div with display: table set on it, which will match the width of the largest child. This way it will adjust to the input's width.
.my-form-control-group {
display: table;
padding: 4px;
}
.my-form-control {
width: 250px;
border-width: 1px;
}
.my-form-control-group.has-error {
color:white;
border-color:red;
background-color: red;
padding: 1px 1px 4px 1px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<div>Some Error Here</div>
</div>
The most obvious option is to use absolute positioning.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.my-form-control-group {
display: inline-block;
position: relative;
background: red;
padding: 4px;
}
.my-form-control {
border-width: 1px;
display: block;
}
.error {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: red;
color: white;
padding: 4px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" />
<p class="error">Some Error Here Lorem ipsum dolor.</p>
</div>
I want to make my textarea like as facebook. Where in same line display a textarea, a upload icon and a emoticons icon.
Now, I want my textarea will be responsible width And 2 icon will be fixed 25px width.
Here is in my example fiddle textarea overflow my 2 icon But I want they will not be overflow.
How can it possible without CSS media query and div contenteditable?
Your markup and style could be simplified
Fork: http://jsfiddle.net/s0e5ks6n/3/
CSS
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.maintbox {
position:relative;
width: 100%;
}
#frm textarea{
min-height: 25px;
border: 2px solid #ccc;
width:100%;
resize: none;
margin: 0;
padding-right:60px;
}
#right {
position:absolute;
top: 0px;
right:0px;
height: 35px;
line-height: 35px;
width: 60px;
z-index:1;
}
#right img {
cursor:pointer;
vertical-align: middle;
}
Markup
<form action="" id="frm">
<textarea placeholder="Type here..."> </textarea>
<div id="right">
<img src="https://cdn3....png" alt="" />
<img src="http://s...png" />
</div>
</form>
Final result
I'm having a problem with the floating property.
My code: JSFiddle
I want it to look this way: printscreen
What can I do, I want the button to NOT float like the other two elements above the button.
My css: (You can see my HTML on JSFiddle)
#upload_photo_form > p {
margin: 3px;
}
#upload_one {
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
background-size: 100%;
float: left;
border: 1px solid grey;
border-radius: 3px;
}
#upload_two {
margin-left: 5px;
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
border: 1px solid grey;
border-radius: 3px;
background-size: 100%;
float: left;
}
You cam modify your code as follows:
<div id="upload_photo_form">
<div>
<p>Please choose a file to upload.</p>
<input id="upload_file" type="file" /><br>
</div>
<div>
<p>Which mode would you like to use?</p>
<div id="upload_one"></div>
<div id="upload_two"></div>
</div>
</div>
<div style="clear:both;"></div>
<button id="upload_button">Upload</button>
Try this:
#upload_button{
margin-top:10px;
clear: both;
}
DEMO
You can also use:
display: block;
Try this if you want to do this just with CSS:
#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}
I am not able to display div text before image, this is what i want
But not able to get it right.
html
<div id="Header" class="header-first">
<h2 class="sometext">Fruit</h2>
<div id="number-of-fruits" style="display: inline; float: right;">0</div> <span>
<img id="someImage" src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="someimage">
</span>
</div>
css
.header-first {
background-color: red;
width: 100%;
height:50px;
}
.sometext {
display: inline-block;
margin: 2px 4px;
text-align: left!important;
color: blue;
}
.someimage {
float: right;
vertical-align: middle;
margin-top: 3px;
}
http://fiddle.jshell.net/WyPWs/1/
Here is an updated fiddle: http://fiddle.jshell.net/WyPWs/4/
Try wrapping your right hand side content in a single div, and then treat your items separately.
<div class="right-section">
<span class="number">0</span>
<img src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="my-image">
</div>
Use positioning. In this case I used relative positioning.
#number-of-fruits {
position:relative;
right:30px;
}
http://jsfiddle.net/WyPWs/10/
I have a set of radio buttons and labels. The radio buttons precede the labels. I would like to center the set of them within a field set. I tried putting them in a div with display set to inline-block. Almost works, but one label gets bumped down to the next line.
My understanding was that giving a div display: inline-block would make it shrink-to-fit, but I'm getting the unexpected behavior you can see here (code below):
http://jsfiddle.net/abalter/TedVe/13/
Is my only hope to manually set margins and stuff? Is there a way to understand why the div is shrinking just a bit too much??
Update...
If I remove the right margin from the label (which is there to add space before the next radio button) then it fits. If, instead, I add margin-left to the button, I still have the problem.
<form>
<fieldset>
<legend>Test</legend>
<div>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Yes</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">No</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Maybe</label>
</div>
</fieldset>
.radio-label {
float: left;
margin-right: 3%;
}
.radio-input {
float: left;
}
fieldset {
text-align: center;
}
div {
display: inline-block;
margin: auto;
border: 1px solid black;
}
Try this remove float left on your .radio-label and .radio-input and now define
display inline-block
As like this
.radio-label {
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
.radio-input {
display: inline-block;
vertical-align: top;
}
Demo
Just remove all styles but text-align:center and you got it. No need to display: inline-block.
here's an updated fiddle:
http://jsfiddle.net/TedVe/8/
.radio-label {}
.radio-input {}
fieldset {
text-align: center;
}
div {}
use this following css.
.radio-label {
margin-right: 3%;
}
fieldset {
text-align: center;
}
div {
display:inline;
border: 1px solid black;
}
add width for div then your problem may fixed
.radio-label {
float: left;
margin-right: 3%;
}
.radio-input {
float: left;
}
fieldset {
text-align: center;
}
div {
display: inline-block;
margin: auto;
border: 1px solid black;
width:50%
}