I am trying to make this Electron app have an iframe that takes up the entire content area. For the test, I'm setting my resolution to 1920x1080. The content being loaded has a blue div at that same resolution. The app renders tall by a few pixels, which forces two scrollbars. I cannot figure out how to get it to render without the scrollbars at that resolution.
Any help is greatly appreciated.
Test repo:
https://github.com/thomasdunn/electron-fullscreen-iframe-test
The trick was simply to put overflow: hidden on body. It then shows the complete document without scrollbars. Still not sure why this is necessary, but it works.
Related
When I embed a long gist (in this case of a Jupyter Notebook), the resulting box on my website has vertical scrollbars. I'd like to avoid these scrollbars and just have a longer page (in the same way it's on the actual gist website). Is there any way to do this, with CSS or otherwise?
I'm basically looking for the exact opposite to
Make Gist embed scrollable
Note that specifying a minimum height in CSS does not work: It produces a white box of the correct size, but the content is still scrolling in the top part of that box only
As I can check, the embed code inserts an iframe and there is no simply way to detect the height of that document (cross-domain).
This might help: Resize Cross Domain Iframe Height
But keep in mind that the workarounds are overkill, I think.
Rather than me going into crazy detail with my question: Home Page Here
As the demo shows, when you resize the window, the images try to stay perfectly in the center of the container, as well as fitting the container without displaying the background.
I have one minor bug, if you resize the window vertically, it does ruin the proportions of the images by squishing them. I was wondering if anyone has any tricks to help this situation, or will I need to detect the image size compared to the window height vs proportions?
I was just trying to avoid a javascript layout.
I have this photo site that I am noodling with and I have an issue with reactive sizing of the browser window. The images look great at 100%, but when I size down the window the landscape images start to resize, which I understand they are sizing down to meet the width of the browser window.
However when I get really small, to mimic a smartphone, I really want these images to stack, as this makes more sense for images that are portrait. So the idea is to go from left to right and then top to bottom when the browser is small. Im kinda rusty at css and I cant remember how to get this done. Can someone please help a brutha out and point me in the right direction so I can get this going? Im doing this all thru my WP override option, so an approach I should follow with just css would be the best, as Im a tard with anything more complex.
the site is here: http://jadanduffinphotography.com/
Thanks!
-Jadan
What I suggest for you to do is:
write css to make the images float: left; and position: relative;inside a container div
detect the orientation of the browser window
according to the orientation, set the width of the container div
This should make the images display horizontally when possible and make them stack vertically when not.
You should take a look at this too probably.
This is good. Don't know what's actually bothering you with the responsive layout but so far your site works great.
If you still do not want that resize/layout on smaller device do remove/edit between lines #7201 - #7509 on this file http://jadanduffinphotography.com/wp-content/themes/heat/style.css
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
All,
I am writing the CSS for our web application. The whole application needs to fit in the browser window without any scrollbars appearing. I also want to set a min-height & min-width properties so that if the browser window gets smaller than our min., only then will the scroll bars appear.
Is there a way of achieving this in CSS please?
Your problem depends to the screen size of the viewers, which may varies greatly. My propose is that you should create a fix width/height div which is the wrapper of all the content (usually 1024x768).