Bringing an image or a component from far off the side of the screen, into the screen via a variant like
const containerVariants = {
hidden: {opacity : 0, x: '-100vw'},
visible: {opacity : 1, x : 0}
}
where initial is hidden and animate is visible, will result in the scrollbar appearing. I do not see the scrollbar appear on the tutorials I watch, any idea why this happens or how I can prevent the scrollbar from appearing?
It seems counter-intuitive that a scrollbar would appear during framer motion as how else can I slide objects into view.
I had the same issue, resolved by removing "overflow: auto;" from css of the container for my animated components.
If you want to explicitly remove the scrollbars from appearing, you want to add overflow: hidden; to the style for that element and make sure there is a specified height.
I am using component based architecture and want to show bootstrap modal which gets adjusted to image height and width.
Most of the forums suggested to use height and width in percent but this will not going to help as image size can vary.
Has anyone achieved this?
There's a simple solution for this. first of all you will need to override the modal's width property (height is auto adjustable and shouldn't be a problem), the modal window uses the .modal-dialog class, so use !importent to override width
.modal-dialog {
width: fit-content !important;
}
content-box will adjust the width according to what the element contains.
here's a demo
I am on react native v.42 using width='100%' with images created for an iphone 7 #2x (750px width). This works properly for the iphone 7, but if I look at the images on a 7plus, they get clipped at the top and bottom. In order to prevent this, I have to save out the images for a 7plus (818px #2x).
Does anyone know how to use width='100%' and have the image scale beyond its maximum native dimensions proportionally? Changing resize mode does not work. I also don't want to use any plugins if I can help it.
I know that I can explicitly define the height and width based on the window Dimensions:
import { Dimensions } from 'react-native'
const { height, width } = Dimensions.get('window')
export {
height as deviceHeight,
width as deviceWidth,
}
and use a ratio calculation for the height, but I am looking for a way to not have to declare dimensions for the height (essentially a height: auto).
Theres a few things you can try.
Try telling the image to cover the screen
resizeMode: 'cover'
Because this is all flexbox layout you can use align-self to tell the child to stretch
alignSelf: 'stretch'
If neither of these work for you.. Another alternative that I've done before is to remove the static size so that it will grow naturally (by specifying null for the width and height)
width: null,
height: null
Facebook docs on support
Using the option data-height="100%" sets the height of the Fotorama to the height of the window. This is by design. However I would prefer it set to the height of the parent element.
I'm containing the Fotorama inside of a container which is almost full height, but has padding for navigation which is fixed to the bottom of the window. But on mobile is fixed to the header.
Any help would be greatly appreciated!
height = $('#fotorama').parent().outerHeight()
$('#fotorama').fotorama({width: '100%', height: height})
I have fitVids working on my site. However, I'm wondering if it is possible to prevent fitVids from enlarging a video beyond its defined height/width. For example, if a video is 600px wide, but the container is 800px, fitVids enlarges the video to 800px wide and it is blurry. I'd only like fitVids to shrink the video when the container shrinks for smaller devices. Is that possible?
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
helgatheviking's solution constrains the width of the video, but not the height. If your container is wider than the video, you end up with a really tall, letter-boxed video. The height is easy to fix, using the same technique to constrain the width. But, there's a third variable.
fitVids wraps the iframe in a div, with the class "fluid-width-video-wrapper", and sets padding-top equal to the aspect ratio of the video. Even if height and width are constrained, the fluid-width-video-wrapper will still be as tall as the video could be, if it didn't have a max-height. So, you end up with a bunch of white-space below the video.
Rather than set all three values (width, height, and padding), you can simplify everything by wrapping the iframe in a div with a max-width, before initializing fitvids.
var vidFrame = $('#fitvids_container').find('iframe');
var vidWidth = vidFrame.attr('width');
if (typeof vidWidth !== undefined) {
// Wrap the iframe in a Div with max-width defined
vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>');
}
// Initialize fitVids
$('#fitvids_container').fitVids();
Like helgatheviking's solution, if you have more than one video per page, you'll have to calculate the max-width for each video.
One option is to make a small modification to the fitvids code which checks for a data-maxwidth attribute and if found wraps a div with a max-width style to limit the resized iframe.
This allows each videos max width behaviour to be specified independently.
For example. Add the data-maxwidth attribute to the iframe.
<iframe width="560" height="315" data-maxwidth="560" src="https://www.youtube.com/embed/L-UIiRlydow" frameborder="0" allowfullscreen=""></iframe>
Then add the following code snippet to the fitvids.js file, at the end of the $allVideos.each function, just after $this.removeAttr('height').removeAttr('width');
if ($this.data("maxwidth"))
$this.parent('.fluid-width-video-wrapper').wrap('<div></div>').parent().css('max-width', $this.data("maxwidth"));
It simple!
Assuming "thing-with-videos" is the ID of the wrapper on which you are calling .fitvids()
So just set the max width css property for this container.
Example:
#thing-with-videos {
max-width: 600px;
margin: 0px auto;
}
This wont let your video width go beyond 600px. Margin property will center your video container.
Live Edit Demo -
http://bitconfig.com/fit-vids/bitconfig_fitvids.html
Set your custom width in the "Video container width" textbox and watch the preview!
-Patrick
Patrick's answer eventually made me realize that I could put a max-width on the iframe itself.
#fitvids_container {
max-width: 600px;
}
#fitvids_container iframe {
max-width: 500px;
}
However, if you were using a lot of videos (of different sizes), you might want to do this dynamically. With jQuery we can get the width from the iframe attribute and make it a max-width style rule. This only works if you've included the width attribute in your embed code though. This is a single example, but could be adapted to an .each() loop or at least renaming the container div to a class.
var width = $('#fitvids_container').find('iframe').attr('width');
if (typeof width !== undefined) {
$('#fitvids_container').find('iframe').css('maxWidth', width + 'px');
}
See my example: http://jsfiddle.net/Qd4FW/2/