I'm using the angular bootstrap timepicker but I cannot seem to change the font size which cuts off some of the text like below:
HTML:
<div class="col-md-1">
<div class="input-group">
<label>End:</label>
<timepicker ng-model="filter_endtime" ng-change="changed()" hour-step="hstep"
minute-step="mstep" show-meridian="ismeridian"></timepicker>
</div>
</div>
If I inspect the element in a browser I can change the .form-control font-size to 12px and it looks fine.
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.4285;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
Is there anyway I can override the font size in the timepicker control?
I've tried doing
font-size: 12px !important;
as another class in the input-group but it makes it look like this:
change .form-control class styles in your bootstrap css.
.form-control{
font-size:12px
}
or use inline style
<timepicker style="font-size:12px;" ng-model="filter_endtime" ng-change="changed()"
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</timepicker>
Just set css for .bootstrap-timepicker-hour and .bootstrap-timepicker-minute:
bootstrap-timepicker-hour{
font-size:12px !important;
}
Try in fiddle
http://jsfiddle.net/sqe64a09/
Related
Other code that might be blocking the animation:
.projectLinks a{
background-color: var(--secondary-color);
color: var(--main-color);
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
Animation
transition-property: transform;
transition-duration: .3s;
}
.projectLinks a:hover{
background-color: var(--secondary-hover);
transform: translateY(-3px);
}
The hover color is applied but there is no transition. Why is that?
Here is a link to a codepen recreation of what I have:
https://codepen.io/Ancross/pen/yLKabeM
You will want to change the display property of the links. By default they are display inline.
To keep a similar look, I used display:inline
.projectLinks a{
background-color: rgb(0, 153, 255);
color: white;
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
transition-property: transform;
transition-duration: .3s;
display:inline-block;
}
.projectLinks a:hover{
background-color: rgb(1, 137, 228);
transform: translateY(-3px);
}
<div class='projectLinks'>
<a>Text</a>
</div>
You are using translateY on an inline-level element which can not be transformed due to some limitation. To use it correctly you can make it an inline-block
write this line in CSS like
.projectLinks a {
...
display: inline-block;
}
this will cause this to display inline but as a block for more info about inline element and block level element please refer below MDN docs:
inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
block level element: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
i got a problem in css . So when i remove the color from input , outline works as it has to , but when i add color:white at first it shows default outline with color white , and only then the written outline works
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
<input type="text" name="" id="" placeholder="Nickname..." />
check this out http://test-znaniya.ga
This happens because of this line:
transition: outline-color 0.5s ease-out;
It will transition the outline-color from the current color to the new colour (#ff5500), but you have not defined a current color, so the question is "what is the default value of outline-color ?
According to MDN in the formal definition, the initial value is
"invert, for browsers supporting it, currentColor for the other"
currentColor will be lime in the example you gave.
So to recap what is happening when you focus:
the outline is set to solid with 2px width
it's color is transitioned from lime to some kind of red
This can be easily fixed by simply adding a default value for the current-color to for example the same as the border color:
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
outline-color: #282828;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
In every other browser the :active selector works even if there are elements nested inside the anchor tag, but IE11 seems special. (Microsoft Edge is apparently fine).
I'd expect when I click on the anchor tag, even if I click on the span, that the active selector will be applied.
http://jsfiddle.net/91ejuvjm/4/
HTML
<span>Click here</span>
CSS
a
{
display: block;
background-color: red;
}
a:active
{
background-color: blue;
}
It's an anchor tag and according to the spec it can be active, but it's like the span tag captures the click. I tried adding pointer-events:none; to the span tag and it ignores it which is against the spec and obviously a bug. I also thought maybe it was being selected since it's text, but -ms-user-select: none; doesn't help. Am I missing something obvious? How do I make clicks ignore the span tag in IE11?
#FighterJet had the solution for me pointer-events: none; on the nested element allows for the parent to take the event (for ie)
.squishy span {
position: absolute;
/*######################
# THE IMPORTANT PART #
######################*/
/*pointer-events: none;*/
display: inline-block;
white-space: nowrap;
top: 0;
left: 0;
vertical-align: middle;
line-height: 75px; /*change to btn height*/
width: 100%;
height: 100%;
-webkit-transition: transfrom .15s;
-moz-transition: transfrom .15s;
-ms-transition: transfrom .15s;
transition: transfrom .15s;
}
/* The solution! */
.solution {
pointer-events: none;
}
.btn-1 {
width: 75px;
height: 75px;
border-radius: 50%;
}
.squishy {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 10px;
color: #fff;
text-align: center;
background: #333;
box-shadow: inset 5px 5px 15px rgba(150, 150, 150, .5), inset -5px -5px 15px rgba(0, 0, 0, .5), 3px 3px 5px rgba(0, 0, 0, .7);
-webkit-transition: box-shadow .15s;
-moz-transition: box-shadow .15s;
-ms-transition: box-shadow .15s;
transition: box-shadow .15s;
}
.squishy:active {
box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .5), inset -1px -1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .7);
}
.squishy:active span {
-webkit-transform: scale(.95);
transform: scale(.95);
}
<h1>Broken in IE</h1>
<a class="squishy btn-1" type="button">
<span>O</span>
</a>
<h1>Works in IE</h1>
<a class="squishy btn-1" type="button">
<span class="solution">O</span>
</a>
I ran into this problem while making buttons. Now they work properly in IE http://codepen.io/FluidOfInsanity/pen/XjpEag
IE11 doesn't allow block elements I guess to function that way.
http://jsfiddle.net/91ejuvjm/7/
span
{
display: inline-block;
}
Another example that's probably more complete: http://jsfiddle.net/91ejuvjm/8/
Was playing around and changed the span to inline-block and it's fine.
I would like a series of divs with no margin and both top and bottom box shadows such that the box shadows of each div do not overlap any other divs. I've constructed a jsfiddle to show what I'm trying to achieve and what I have now. This seems like something that z-index could be used for, but I'm not sure how.
Put all of your DIVs in one outer wrapper DIV. Apply a box shadow to that, and to the hover state of each internal DIV. Now each can be controlled independentaly.
<div class="outer">
<div class="inner">The box shadow from each div...</div>
<div class="inner">...should go under each other div.</div>
<div class="inner">The whole thing should look...</div>
<div class="inner">...like one big div with a shadow...</div>
<div class="inner">...unless you hover over one.</div>
</div>
div.outer {
background: #fff;
margin: 0px auto;
padding: 0px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.outer:hover {
box-shadow: none;
}
div.inner {
padding: 20px;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.inner:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin-left: -20px
width: 350px;
}
I've styled this such that the box shadow on the outer DIV disappears when you hover over it, so only the hovered innerDIV shows a shadow. Adjust to taste :)
Fiddle:
https://jsfiddle.net/ehxsdjr8/7/
Are you looking for something like this?
Fiddle
$( 'div' ).hover(
function() {
$(this).addClass( "hey" );
$('div').not(this).addClass( "heyho" );
}, function() {
$(this).removeClass( "hey" );
$('div').not(this).removeClass( "heyho" );
}
);
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
.hey{
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
.heyho {
box-shadow: 0px 0px 5px #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The box shadow from each div...</div>
<div>...should go under each other div.</div>
<div>The whole thing should look...</div>
<div>...like one big div with a shadow...</div>
<div>...unless you hover over one.</div>
https://jsfiddle.net/ehxsdjr8/13
The trick here is to add multiple shadows to each div and turn them on/off as needed. In this case, add the top shadow for the first element and the first element after a hover only and modify the existing shadow to not go above the element.
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 3px 3px #999;
transition:
padding .1s ease-in-out,
width .1s ease-in-out,
box-shadow .1s ease-in-out;
}
div:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
div:hover + div {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type:hover {
box-shadow: 0px 0px 5px #666;
}
It'll take a lot of playing around to get this to look right.