I am using modals from bootstrap for my web/mobile application. And my intention was for my modals to fill up on the whole mobile screen when they are triggered. I have a added a custom css to make my modals 'full size'.
.modal {
&.full_size {
top: 0;
bottom: 0;
left: 0;
margin-left: 0;
width: 100%;
height: 100%;
}
}
However, on the mobile phone, although I did successfully see a full screen modal being display, I don't seem to be able to see the contents that 'overflow' from the full screen modal i.e. if the content height is greater than my screen height, I won't be able to scroll down to see the rest of my content.
How can I resolve this so that I can scroll and see all my content in my modal?
Try adding overflow:auto; to allow scrolling when the content exceeds the container's dimensions
Related
How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!
You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.
You can make it go fullscreen with JS such as in this SO answer.
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* example on JSFiddle.
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.
I am trying to mimic the header-graphic navigation from this site:
http://wpengine.com/
It seems that they are not applying any grid on the header-graphic area, but having them separated as 2 divs. In their Hero block (container) area. I am looking to recreate the giant content area (fluid content box with 5 navigation buttons). Please try to stretch the right side of browser, the main navigation boxes stays at the same position and the left area (content) extend its as fluid. I am trying to create that appearance.
These are the codes below are the code I inspected from google developer tool:
/* For content navigation area */
.gwc_slide_buttons {
width: 375px;
height: 556px;
right: 0;
position: absolute;
}
/* For content area */
.gwc_slider {
left: 0;
right: 375px;
height: 556px;
position: absolute;
overflow: hidden;
}
What I have in my code:
/* For content area */
.slider_content {
position: absolute;
}
/* For the content navigation area */
.slider_content_navi {
width: 430px;
position: absolute;
}
As you can see here, I tried both absolute positioning for my content and navigation button, but it is not working as it should be compare to the code I have inspected.
Does anyone have any suggestion?
Here is the preview on jsFiddle.
This is achieved through Media Queries aka different design for different screen sizes. Your HTML will stay the same but you can apply absolutely different styles for different screen sizes.
Also I noticed that you are using Twitter Bootstrap. Check it's Grid System and the Responsive Design support.
Im creating a mobile version for my website, and I'm currently busy with a 'image scroll' by swiping. I found a code on the internet I'm using, but it doesn't work with the menu i've created.
The menu that pops up, stays below the image scroller..
How do I get it to get below the opened menu?
Thanks for the help!
Regarding this page: http://m.tf2-29.com/TF_Members.asp
Try to set z-index of popmenu
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
.bbstable
{
BACKGROUND: #1e201c;
margin: 0px;
padding: 0px;
z-index: 2; /* set z-index higher than image scroller */
}
or remove z-index: 1 in .swiper-container
I've set jQuery's accordion ui widget to fill space and resize on demand. Whenever the resize takes place, the accordion cuts through the page footer, which I've 'fixed' to the bottom of the page. I've also tried setting the footer to: #footer {position: absolute; bottom: 0; } but on resize the footer moves nearly to the middle of the page. Does anyone have any ideas/suggestions on how I can handle the resize so the newly sized accordion does NOT pass through the footer?
Try make a container and set its CSS to
overflow:auto;
Or try set the container to:
display: table;
and the #footer:
display: table-row;
Add the following CSS in the same div. (which is resizable).
overflow:auto;