I am using materials Md-button's in a md-side-nav and this button is offset when it it 4 characters long. I inspected the css of these two button and the only thing that is different is the origin transform
Codepen: click toggle right nav to see the effect.
http://codepen.io/anon/pen/oXpdae
<md-button ng-click="close()" class="md-primary">
123456
</md-button><br>
<md-button ng-click="close()" class="md-primary">
123456789
</md-button>
Solution was to add this to the menu, as when wrapping the button with an the text is centered
a {
text-align: left;
}
I am attempting to use flexbox to achieve a series of sections that fill 100% width and height of the viewport. This works perfectly on desktop without any issues when resizing the browser window. On mobile however, whenever I change the orientation, the section sizing does not adjust correctly.
I have made a pen of my issue:
http://codepen.io/beefchimi/full/LlInw/
The flexbox css is:
main {
display: flex;
flex-flow: row wrap;
}
section {
display: flex;
flex: 1 0 100%;
height: 100vh;
}
article {
margin: auto;
}
I believe my implementation is correct... but I'm very surprised to see iOS not behaving as expected. Any suggestions on solving this problem?
Thanks!
Turns out this is an iOS 6 - 7 bug. More information can be found here:
https://github.com/scottjehl/Device-Bugs/issues/36
The github issue thread suggests a js plugin:
https://github.com/rodneyrehm/viewport-units-buggyfill
For my particular case, I simply implemented my own bit of jQuery that will measure the window height on window load, apply that value to all sections, then track the window height during window resize and reapply. An unfortunate work around :(
var $window = $(window),
$sections = $('section'),
windowHeight;
function adjustHeight() {
// get height of browser window on page load and resize events
windowHeight = $window.height();
// apply windowHeight to each <section>
$sections.height(windowHeight);
}
$window.resize(function() {
adjustHeight();
});
$window.load(function() {
adjustHeight();
});
I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?
You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.
If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.
http://getbootstrap.com/components/#responsive-embed
There's some example code below.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Refined Javascript only solution for YouTube and Vimeo using jQuery.
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
Simple to use with only embed:
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
Or with responsive style framework like Bootstrap.
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Relies on width and height of iframe to preserve aspect ratio
Can use aspect ratio for width and height (width="16" height="9")
Waits until document is ready before resizing
Uses jQuery substring *= selector instead of start of string ^=
Gets reference width from video iframe parent instead of predefined element
Javascript solution
No CSS
No wrapper needed
Thanks to #Dampas for starting point.
https://stackoverflow.com/a/33354009/1011746
I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015. The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos. Black bands across top and bottom.
I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to 56.45%. Seems to look good.
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
#magi182's solution is solid, but it lacks the ability to set a maximum width. I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated.
My solution with two wrappers works like a charm for me:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
I also set the padding-bottom in the inner wrapper to 50 %, because with #magi182's 56 %, a black bar on top and bottom appeared.
Modern simple css solution
The new aspect-ratio is the modern solution to this problem.
aspect-ratio: 16 / 9;
That's all you need to make a div, image, iframe size automatically. Samples.
It's got good support, but is not yet in Safari (will be for upcoming iOS15) - so for now you'll still need to use a fallback. You can achieve that with the #supports feature
.element
{
aspect-ratio: 16 / 9;
#supports not (aspect-ratio: 16 / 9)
{
// take your pick from the other solutions on this page
}
}
Assuming your development browser does support this property be sure to test without it by commenting out both aspect-ratio and #supports.
This is old thread, but I have find new answer on https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
The problem with previous solution is that you need to have special div around video code, which is not suitable for most uses. So here is JavaScript solution without special div.
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
If you are using Bootstrap 5.0, you can use .ratio
https://getbootstrap.com/docs/5.0/helpers/ratio/
Example
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
With credits to previous answer https://stackoverflow.com/a/36549068/7149454
Boostrap compatible, adust your container width (300px in this example) and you're good to go:
<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
Okay, looks like big solutions.
Why not to add width: 100%; directly in your iframe. ;)
So your code would looks something like <iframe style="width: 100%;" ...></iframe>
Try this it'll work as it worked in my case.
Enjoy! :)
I make this with simple css as follows
HTML CODE
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS CODE
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}
I'm working on a JQuery Mobile app. I need to enlarge the font used for the title text. Whenever I enlarge the text size, the height of the ui-header bar grows. I do not want it to grow. Instead, I want the ui-header to stay the same size of the default ui-header. I just want to enlarge the text size. Currently, I have the following:
.t1 { color: blue; font-size:24pt; font-weight:normal; }
.t2 { color: white; font-size:24pt; font-weight:normal; }
<div data-role="header" data-position="fixed">
Back
<h1><span class="t1">My</span><span class="t2">App</span></h1>
</div>
How do I change the font size without making the header grow?
You also have to modify .ui-header .ui-title rule changing top and bottom margin values. For example:
.ui-header .ui-title {
margin: 0 30% 0;
}
http://jsfiddle.net/Pwqtm/1/
Am using the following code to attach a panel to a toolbar button.
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="test-toolbar-button"
label="test"
class="toolbarbutton-1 chromeclass-toolbar-additional"
tooltiptext="test"
type="panel"
>
<panel class="test-panel" id="test-panel" position="after_end" onpopupshown="" width="643px" >
<iframe id="test-panel-iframe" src ="chrome://url.html"
style="height:568px;width:343px;border:none;padding-left:3px;background-color:white;" >
</iframe>
</panel>
</toolbarbutton>
As per the documentation we need to specify two icons for Firefox toolbar button - 16x16 and 24x24
This is the CSS am using,
#test-toolbar-button {
list-style-image: url("chrome://test-24.png");
-moz-image-region: rect(0px 24px 24px 0px);
}
#test-button:hover {
}
#test-toolbar-button[disabled="true"] {
-moz-image-region: rect(0px 48px 24px 24px);
}
toolbar[iconsize="small"] #test-toolbar-button
{
list-style-image: url("chrome://test-16.png");
-moz-image-region: rect(0px 16px 16px 0px);
}
But the toolbar height increases since its having a down arrow which indicates its a panel attached to the toolbar button, there by screwing the whole toolbar.
Screenshot of the sample is attached.
http://postimage.org/image/sqwtwbfip/
Can anyone help me out of this.
-moz-box-orient: horizontal !important;
This worked . Thanks #WladimirPalant