I've got a textbox in which I need to add a Symbol. This symbol should always be visible and not be used in code behind (when getting the value of the textbox) - basicall like a glymphicon icon. I've tried using a span but it is not displaying the way it should.
This is what I've done:
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
#Html.TextBoxFor(m => m.AgreedValue, new { #class = "form-control", placeholder = "Agreed Value" })
</div>
This is how it's currently being displayed:
And this is what I need it to display like:
Is there anything I'm missing? or how can I get it to look like the 2nd image?
Its all about style, If Html can be changed, then this is my solution:
.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.input-text {
border: none;
height: 100%;
width: 100%;
background: transparent;
padding-left: 10px;
}
.input-text:focus {
outline: none;
}
.input-group {
padding-left: 10px;
width: 300px;
height: 40px;
border: 1.5px solid rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 4px;
}
<div class="input-group">
<div>
<span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
</div>
<input type="text" class="input-text">
</div>
Related
Why does it block you to select a file when you click on the button? If you put a span or div in the label, they allow you to select a file when you click on them, but the button does not
<html>
<body>
<label>
<input type="file">
<button class="upload" type="button"></button>
</label>
</body>
<style>
label {
display: block;
width: 100px;
height: 54px;
background: green;
}
input {
display: none;
}
.upload {
background: gold;
height: 100%;
}
</style>
</html>
the problem is that the button is a separate element it is not related to the input even if you wrapped them in one label
so to work around that you need to remove the button and style the label instead
CSS
label {
/* style the input here */
display: block;
width: 100px;
height: 54px;
background: green;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
/* more style .... */
}
input {
display: none;
}
HTML
<label>
select File
<input type="file">
</label>
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 :)
I have a label defined where one half needs to be at left side and the other half of text needs to be on right side. How can I solve this so that the other half is pulled right?
I have added margin-right to get the text to pull at right but it's not consistent for other divs.
<div class="radio">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
Expected Result:
Current Result:
How can I make text in above image i.e. 'Free' to appear on the right most side as shown on expected result? Also make it always consistent on other div such that the space from div is same across.
Here is a complete working example with JsBin: https://jsbin.com/yafesuyola/1/edit?html,css,output
It uses flexbox with justify-content: space-between. I also added a div around the label and the input to keep them on the same line with 100% width.
<div class="radio">
<div class="radio-and-label">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
</div>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
.radio {
border: 2px solid #33c;
border-radius: 5px;
padding: 10px;
background: #e0eeff;
color: #33c;
font-weight: bold;
}
.radio-and-label {
display: flex;
}
.radio-label {
width: 100%;
display: flex;
justify-content: space-between;
}
.test-cost {
text-align: right;
}
.test-hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
Hope that helps!
Clip the element to always be pinned to top right of the element?
.radio {
position: relative;
}
.test-cost {
position: absolute;
top: 2px;
right: 2px; // or whatever px/rem/etc value that fits your need
}
I'm trying to figure out if there is any pure CSS solution to keep a drop-down element open while the input field of that element is focused? Here is an example:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div>Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
The idea is to keep the form visible when the search field is focused. Because when a user starts typing the search inquiry and the mouse move out of the hover zone, the form hides, and that's very annoying.
Side-question: Is it possible to focus via CSS search input element each time a <div> is hovered?
The solution has been already proposed, but lacks browser support:
9.4. The Generalized Input Focus Pseudo-class: :focus-within
The :focus-within pseudo-class applies to elements for which the
:focus pseudo class applies.
An element also matches :focus-within if one of its
shadow-including descendants matches :focus.
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div:focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Meanwhile, you can use a polyfill:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div.focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Wait. There's actually a pure CSS solution. But there is a drawback — it only works with just one <input> tag, and no <form> tag, like this:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
padding: 0.5%;
}
input {
display: none;
margin: auto;
}
div:hover input {
display: block;
}
input:focus {
display: block !important
}
<div>Hover Me
<input type="search" placeholder="What are you looking for?">
</form>
</div>
However, you can just make the user search the form by pressing Enter on the keyboard. Unfortunately, this requires JavaScript, which defeats the whole purpose of this post.
I've also noticed that your placeholder text doesn't really work properly, since the text "Search" is still there. There are two solutions to this — use JavaScript to fix it, or change the 'type' of the input tag to "text".