I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using #font-face referencing a *.ttf-file.
The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.
Here the definition of the input field:
#font-face{
font-family: SourceSansProExtraLight;
src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}
#search_input{
background-color: #f0f0f0;
outline: none;
border: none;
padding: 0;
margin: 0;
width: 236px;
padding-left: 12px;
width: 224px; /* width (236) - padding-left */
font-family: SourceSansProExtraLight;
font-size: 30px;
line-height: 30px;
color: #5e5e5e;
height: 52px;
}
Here's a GIF demonstrating the issue:
Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.
With input[type="text"] there is no Problem.
I have the Problem only with input[type="number"] if the height and line height is equal:
input[type="number"] {
height: 30px;
line-height: 30px;
}
but if I reduce the line height the effect disapears:
input[type="number"] {
height: 30px;
line-height: 28px;
}
Chrome reserve space for caret.
The height of the line must be greater than the height of the font at 1.11 units (on my system).
Example:
font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
Try setting outline-offset: 0 when the input has :focus. That fixed the jumping placeholder bug for me on WebKit. I was also setting outline: none and showing a custom box-shadow, which may be the cause.
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
The green nav bar behind the parent element is positioned as fixed .
And the fixed elements are suppose to break out from the document flow .
But when I am assigning position:fixed; [withot any top,left,right,bottom], then it should be starting from the top-left pixel of screen.
But no it is starting from a very odd position [it's taking margin-top:100px]
[why it is not breaking off from document flow]
Yes parent block [block not element] is having margin of 100px [all sides] Then also
first -> it[green nav] should not care about margins because it should not be in document flow.
Second -> even if its considering the margin from top [of another element], then why it is not considering margin from the left ?
CSS For the Green nav Block -
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
}
position fixed is not breaking out of document flow
as it is considering margin-top of the parent element! When
positioned as relative working expected [within document flow]
CSS for Another block parent whose margin the above navbar is taking -
div.parent{
margin: 100px;
height: 400px;
width: 400px;
border: 3px solid red;
background-color: skyblue;
position: relative;
}
Green Navbar with position fixed, not breaking off document flow
Green Navbar with position relative, staying in document flow as expected
So the real question is why the navbar is not starting from top,left most corner ?
Try this css for stick green navbar on top
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
top:0px;
left:50%;
transform:translateX(-50%);
}
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/
I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?
Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.