I have a form input, and the label spans multiple lines, and I want the corresponding checkbox to appear at the bottom (last line of the label element).
Here is what I was playing with
CSS
.standard-form {
width: 500px;
border: 1px solid red;
}
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
}
.standard-form label {
width: 25%;
float: left;
}
.standard-form .input-container {
width: 70%;
float: right;
}
.standard-form .checkbox .input-container {
display: table-cell;
height: 100%;
vertical-align: text-bottom;
}
HTML
<form class="standard-form">
<div class="input-row checkbox" id="permission">
<label for="input-permission">
Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome? </label>
<div class="input-container">
<input type="checkbox" id="input-permission" name="permission" value="true" /> </div>
</div>
</form>
It is also online at JSbin.
Is there any way to do this? I notice that div.input-container isn't expanding, which is the old multi column problem with CSS.
I thought I could get this going with display: table-cell and vertical-align: bottom but I haven't been able to do it yet. I don't mind that IE6/7 won't render it correctly.
I have also tried using a combination of position: relative; with the child position: absolute; bottom: 0; except then I need to specify a height which I can not guarantee will be the height of the label on the left.
See my changes in action: http://jsbin.com/ocovu/2/edit
Here are the relevant declarations:
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
position: relative;
}
.standard-form .checkbox .input-container {
position: absolute;
bottom:-2px;
left:25%;
}
Tried display: block?
Related
Try to make input with close-icon button,<input type=search> but I need more styling so I decided to make it on my own,but the problem is the position of input and label also moved slightly when want to clear input.
form.component.html
<div class="flex-center ">
<input class="input" [(ngModel)]="value">
<button *ngIf="value" class="button-close" (click)="value=''">
</button>
<label class="desc">description</label>
</div>
form.component.css
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.desc {
padding-left: 16px;
}
.button-close {
margin-left: -5%;
}
this is what I had tried so far, clereable input demo. need advice how to solve this,
The problem is that the button does not exist when the input is empty and when some text is entered, the button is inserted into the DOM taking some space which makes the label move. One way of putting the button on a different layer is to use position: absolute on an element.
Try something like this:
clearable-input.component.html
<div class="input-wrapper">
<input class="input" [(ngModel)]="value">
<button *ngIf="value" class="button-close" (click)="value=''">X</button>
</div>
<label>Description</label>
clearable-input.component.ts
.input-wrapper {
position: relative;
display: inline-block;
}
button {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
border: none;
background-color: transparent;
}
label {
margin-left: 15px;
}
Working demo
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 :)
My issue was I have this nice font set and I use that to place custom icons next to my buttons. (ie: see here)
But now I want to create an input box and put an icon before it like HERE
But instead of a background image I want to put a font in the before content, is this possible?
CSS
.input-box { position: relative; }
input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; }
.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }
HTML
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">To;</span>
</div>
check following example here
http://jsfiddle.net/pZLcg/52/
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>