I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.
Here's the JSFiddle.
This is the CSS for the box but I don't see an issue here:
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?
Add float left to .select-style:
.select-style {
...
float: left;
...
}
Lower the width of #search-box input[type="text"]. 80% seems good:
#search-box input[type="text"] {
width: 80%;
...
}
Related
I am trying to put the top side of the icon caret-down lined up with the bottom side of my p:
There is a gap between the arrow and the p, I don't know how to get rid of this gap.
I set p with margin-bottom: 0, but the gap of the image still remains.
My second guess was to set the icon with a negative margin-top, but it only works so far:
The image above shows what happens when I set the icon with margin-top: -10px. I am still getting a gap and this is the closest I can get the icon next to p, it doesn't matter how much I decrease the margin-top, this is the limit.
Maybe there is something about these icons that I don't know.
A sample of my code:
JSX:
<div>
<p onClick={() => setTag('all')} className="products-select products-select-active">ALL PRODUCTS</p>
<FontAwesomeIcon icon="caret-down" size="2x" />
</div>
css:
.products-select {
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
.products-select-active {
background-color: #3A3A3A;
color: white;
}
Icon:
How can I fix it?
EDIT:
I just made my own arrow-down with css and JSX and it solved my problem.
EDIT 2:
#lt1 solution works great.
When you need to move something around precisely, you can use the transform CSS property with a translate value. For example, here you could try
.products-select {
transform: translateY(15px);
}
That will move the products-select down by 15px, you can adjust the value to whatever you need. (there's also translateX for a horizontal translation.)
Try adding box-sizing: border-box to the products-select class, like so:
.products-select {
box-sizing: border-box;
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
And then set your height. :)
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.
I am trying to create a customized search box. I tried the following but getting weird results.
this is my css code
.inputboxSearch {
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('images/searchbox.png') no-repeat;
padding-right:20px;
}
where, searchbox.png is a full a image (180*30 png) of a searchbox. Then i have tghe following code.
<input class="inputboxSearch" type='text' name='search' size='25'/>
But, how it appears is that, the search box image comes inside of the input box, and it is only half displayed. Rest is not visible. But wat i expected was, the search box should encompass the input box. The revers is happening here anyways. How to solve this
Set .inputboxSearch border to none, and increase its height to 30px:
.inputboxSearch {
background: url("images/searchbox.png") no-repeat scroll 0 0 transparent;
border: none;
height: 30px;
margin: 0 0 1em;
padding-right: 20px;
}