css – Page 252 – Tarik Billa

YouTube Video Embedded via iframe Ignoring z-index?

December 10, 2022 by Tarik

Try adding wmode, it seems to have two parameters. &wmode=Opaque &wmode=transparent I can’t find a technical reason why it works, or much more explanation but take at look at this query. <iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent” frameborder=”0″ wmode=”Opaque”> or this //Fix z-index youtube video embedding $(document).ready(function (){ $(‘iframe’).each(function(){ var url = $(this).attr(“src”); $(this).attr(“src”,url+”?wmode=transparent”); … Read more

Bootstrap css hides portion of container below navbar navbar-fixed-top

December 10, 2022 by Tarik

This is handled by adding some padding to the top of the <body>. As per Bootstrap’s documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high. body { padding-top: 70px; } Also, take a look at the source for this example and open starter-template.css.

Placeholder Mixin SCSS/CSS

December 10, 2022 by Tarik

You’re looking for the @content directive: @mixin placeholder { ::-webkit-input-placeholder {@content} :-moz-placeholder {@content} ::-moz-placeholder {@content} :-ms-input-placeholder {@content} } @include placeholder { font-style:italic; color: white; font-weight:100; } SASS Reference has more information, which can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content As of Sass 3.4, this mixin can be written like so to work both nested and unnested: @mixin … Read more

Remove border radius from Select tag in bootstrap 3

December 10, 2022 by Tarik

Here is a version that works in all modern browsers. The key is using appearance:none which removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input. Note: appearance is not supported in IE. Working example: https://jsfiddle.net/gs2q1c7p/ select:not([multiple]) { … Read more

How to align absolutely positioned element to center?

December 10, 2022 by Tarik

If you set both left and right to zero, and left and right margins to auto you can center an absolutely positioned element. position:absolute; left:0; right:0; margin-left:auto; margin-right:auto;

How are the points in CSS specificity calculated

December 10, 2022 by Tarik

Pekka’s answer is practically correct, and probably the best way to think about the issue. However, as many have already pointed out, the W3C CSS recommendation states that “Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.” So the geek in me just had to figure out just … Read more

How does rem differ from em in CSS?

December 10, 2022 by Tarik

EMs are relative to their parent’s font size REMs are relative to a base font-size This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.

What does it mean when Chrome Dev Tools shows a computed property greyed out

December 9, 2022 by Tarik

NB: This answer has no solid evidence, it’s based on my observations along the time. The gray calculated properties are neither default, nor inherited. This only occurs on properties that were not defined for the element, but calculated from either its children or parent based on runtime layout rendering. Take this simple page as an … Read more

How to include view/partial specific styling in AngularJS

December 9, 2022 by Tarik

I know this question is old now, but after doing a ton of research on various solutions to this problem, I think I may have come up with a better solution. UPDATE 1: Since posting this answer, I have added all of this code to a simple service that I have posted to GitHub. The … Read more

margin-top only when the flex item is wrapped

December 9, 2022 by Tarik

You can add some margin-top to both flex items, and a negative margin-top of the same amount to the flex container. This way, the negative margin of the flex container will neutralize the margin of the flex items at the first line, but not the margin of the items that wrapped to other lines. .container … Read more