I was hoping someone could help me with this. I am trying to create this example:
These are (three) text boxes. Example:
I tried putting text box in side a div and making it's width pretty low and aligning a second text box next to it. I set border: none and then
border-right: solid black 1px but on bootstrap I end up with something like this:
Posting answer to my own question, may be useful to some one else in the future.
Iv used the following HTML:
<div class="addressMain">
<div class="addressBorder">
<div class="addressUnified">
<input type="text" placeholder="No." class="small" ></input>
<input type="text" placeholder="Address Details..." class="med"></input>
<br>
<input type="text" placeholder="" class="big"></input>
<br>
<input type="text" placeholder="" class="big"></input>
</div>
</div>
and the following CSS:
.addressUnified .med{
width: 80%;
border: none;
border-left: solid grey 1px;
padding-left: 15px;
outline: none
}
.addressUnified .big{
width: 100%;
border:none;
padding-top: 5px;
padding-left: 10px;
outline: none
}
.addressUnified .small{
width:10%;
border:none;
padding-left: 10px;
padding-top: 10px;
outline: none
}
.addressUnified{
width: 100%;
height:100px;
border: solid grey 1px;
}
The results were exactly as I wanted in the original question. Thanks John for your help!
note, override any bootstrap css using !important.
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 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 need your help. How to fix that 2px difference? I really have no idea...
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav fr parent">
<li id="menu-item-99" class="menu-item menu-item-type-custom">
<div id="search">
<form method="get" action="site" >
<input type="text" name="s" placeholder=" search..." />
<input type="submit" value="" name="submit" />
</form>
</div>
</li>
</ul>
</nav>
And here is CSS:
#search {
float: left;
background: #000;
color: #fff;
}
#search input[type="text"]{
width: 95px;
background: #000;
color: #fff;
border: 0;
margin-left: 1px solid #fff;
#navigation {
float: right;
clear: none;
border: 0;
box-shadow: none;
width: 850px;
background: 0;
}
#navigation ul.nav {
float: right;
}
The Screenshot: http://i.stack.imgur.com/fYcBs.png
Your reset CSS doesn't work as you'd expect it to.
Styles computed for the submit input in FF are:
[name=submit] {
width: 6px;
padding: 3px 6px;
border-width: 3px;
}
which makes it 24px wide in total.
And for the Chrome:
[name=submit] {
width: 0;
padding: 1px 6px;
border-width: 2px;
}
which makes it 16px wide in total.
Here's an example: http://jsfiddle.net/n5u9L/2/
You should reset the padding, border-width and the width for this input, like this:
#search [name=submit] {
padding: 0;
width: 6px; /* or whatever you want */
border-width: 0;
}
Well, it's hard to read anything from the image you provided but I guess the problem is font rendering. As we can see from the CSS the #search is float: left, so its position will depend on the element that is on the left hand side of it. I assume that there is some text in the left container. Unfortunately you covered it with black rectangle and you didn't provide us any HTML of it.
The problem is, every browser renders font faces different even if they're the same font-family. Each letter might differ in width and spacing.
You must style your #search so that its position doesn't depend on the width of the element on the left side.
The question is as the title indicates. Code:
<form action="results.php" style="" target="_top" method="post">
<input type="text" name="search_area" id="username_input" class="search_box" >
<input type="image" onmouseout="this.src='resources/images/button_search_a.png'" onmouseover="this.src='resources/images/button_search_b.png'" src="resources/images/button_search_a.png" value="" class="searchbutton1">
</form>
I would like the input field and the button horizontally aligned as it appears in ff and chrome.
.search_box{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #C0C0C0;
font-size: 10px;
font-weight: bold;
height: 17px;
margin-left: 10px;
margin-top: 12px;
padding-left: 3px;
right: 8px;
width: 234px;
}
.searchbutton1 {
height: 25px;
margin-top: 6px;
width: 100px;
}
And the form is lying inside a div of width 350px.
It might be due to different css default values across browsers. You might want to try a css reset. There's a load of different ones on the internet, but one of them is over at meyerweb
I am having problems styling form fields with CSS. As you can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!
I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...
What am I doing wrong?
IE7 (xp)
FFox (linux)
Chrome (linux)
CSS (nothing for subscribe_form):
#form_box {
position: relative;
height: 35px;
top: 7px;
left: 20px;
}
#subscribe_email {
border: solid 1px #CCC;
height: 24px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
}
#subscribe_submit {
position: relative;
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
HTML:
<div id="box2" class="tbox">
<div id="form_box">
<form id="subscribe_form" action="subscribe" method="post">
Sign Up:
<input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
<input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
</form>
</div>
</div>
Here is what works for me in FF, IE8 and Chrome on XP
#subscribe_email {
border: solid 1px #CCC;
height: 21px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
vertical-align: bottom
}
#subscribe_submit {
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.
you should try floating them both left, that way they will position themselves.
before aplying any css make all margin and padding zero
by default all browser as thr own margin and padding
by making it zero and then applying ur style it affects eventually