I have forked this codepen from chris coyer example and I am wanting to make the label move to the top instead of the bottom as his was doing.
In so doing, I simply can't get the cursor/carrot to move to the bottom instead of staying at the top, and so when you type, it overwrites the label and is a mess. The code to move label (still called go-bottom but that doesn't matter)
form.go-bottom {
input {
padding: 12px 12px 12px 12px;
}
label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
input:focus {
padding: 4px 6px 20px 6px;
}
input:focus + label {
top: 100%;
margin-top: -36px;
}
}
I've tried various padding settings on the input and for some reason none are affecting the cursor position itself - if anyone can help adjust it that would be great. (this is purely css/sass based and don't want any JS or other)
Bonus points for changing the transition animation to go from bottom to top instead of top to bottom :)
You could try adding more top padding and less bottom padding for the input on focus.
input:focus {
padding: 17px 6px 4px 6px;
}
I would play with overall padding too if your going to try this approach, the inputs feel cluttered when 2 lines of copy.
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. :)
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%;
...
}
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
I'm creating a custom select menu for a form which uses a background image as a downward arrow button. I achieve this effect with this CSS:
.calculator_select select {
background: url(../img/arrow.png) no-repeat right 65px top -3px #95957A;
overflow: hidden;
width: 110%;
padding: 5px;
line-height: 1;
border: 0;
border-radius: 0;
height: 25px;
-webkit-appearance: none;
color: white;
padding-left: 25px;
position: relative;
}
.calculator_select select:focus {
background: url(../img/arrow-flipped.png) no-repeat right 65px top -1px #95957A;
}
This works almost perfectly except that the CSS remains in the focused state once an option has been selected and only returns to the first state when the user focuses on another element. Is there some way around this? i.e. CSS is only in the second state when the menu is open? Thanks!
For slaps and giggles, I took a shot and came up with an inelegant solution - FIDDLE.
In this code, you determine which of your ul elements will give a dropdown, and use that element definition to trigger a mouseover/mouseout sequence.
JS
$
( 'nav ul li:nth-child(2)' ).mouseover(function(){
$('.statusdiv').css('background-color', 'green');
});
$( 'nav ul li:nth-child(2)' ).mouseout(function(){
$('.statusdiv').css('background-color', 'red');
});
Again, more of a brute-force approach, but perhaps it will give others some ideas to make it better.
It's a tricky problem I have and I don't find the best solution. Here is the page:
https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/
As you can see, the green div element overflows the user profile. I don't want to use a margin-left to align it because it will change the position of other green elements and I want to keep a common structure between each of them (this means I don't want to add a new class to align this green element). I want to design a clean solution and make this green element automatically align when it is in the first part (next to the user profile) and in the second part (below the user profile) and only with css (I want this solution working with JavaScript deactivation).
here is the main class for this div (others are just margin top and bottom adjustments):
.block-info {
display: block;
margin: 10px 0 0;
padding-bottom: 3px;
border-left: 28px solid $green;
.icon-block, .text-block {
display: block;
}
.icon-block {
float: left;
margin-top: 5px;
margin-left: -23px;
}
.text-block {
padding-left: 18px;
}
+ br {
display: none;
}
}
If someone have an idea.
Set .block-info to display: table and its children to display:table-cell (this might not be needed, but I believe it should be done for correctness) and it should behave more like you expect.