First of all, using Angular 4, bootstrap 3, html 5.
Right now, I have an iframe <iframe src="http://test.test"></iframe> with the style
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100%;
}
When the html pops, the height is correct (and I have no scrollbar), but when the content of the iframe page changes, a scroll bar appears. My objective is to not have the scrollbar in the iframe, NEVER.
EDIT1: Already tried overflow: hidden;, does not work.
EDIT2: I do not want content to spill onto the parent page.
I had a similar issue and I add a js script to take the full innerHeight, try this, you can also implement it onload of the window (you can use id, but i always show class example because it can be used multiple times) :
<script>
window.onresize = function() {
var frame = document.getElementByClassName('myFrameClass')[0];
frame.style.height = window.innerHeight;
}
</script>
EDIT : must have scrolling="no" on the iframe tag, and the overflow: hidden css rule for inner content
Try adding overflow: hidden to your styles.
Related
I want to have a button that takes me to a specific part of my horizontal scrolling website.
I am using Wordpress. I am willing to use any theme (or customizing any theme) as I've already tried several.
I tried using id, elementor menu anchors, 'page to scroll id' plugin...
Everything works only as long as the website scrolls vertically.
I add custom CSS in WP Customizer to make it horizontal. It works only when scrolling with the mouse.
However, the ids, or anchor links don't make the page scroll horizontally when you click the button (or text, or whatever takes you to the #id_name).
I know it has to do with the CSS, and that I probably need to use a js scrollbar, or something like that, but I can't find something that works so far.
I am using Astra Theme and Elementor.
This is the extra CSS i used:
.elementor-inner {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display: flex;
flex-direction: row;
width: 600vw;
}
.section {
width: 100vw;
height: 10vh;
}
::-webkit-scrollbar {
display: none
}
My solution is not specific to a Wordpress theme, but I hope it will help you out nonetheless. If you want to post your HTML markup, I can give a more specific answer for your scenario :)
Assuming your page layout is already set up with horizontal scrolling, here are the steps you'll need to take to get that anchor functionality working:
Set an ID on the element you wish to scroll to.
Set a click listener on the button/link you'd like to trigger this scroll from.
On click of the button, get the offsetLeft property of the element you'd like to scroll to.
Set the parent container's scrollLeft property to that value from above.
HTML:
Scroll to Element!
<!-- your existing markup -->
<div id="my-element">
<p>Content would go here</p>
</div>
<!-- /your existing markup -->
Note: I'm using an anchor <a> tag with an href attribute here, since we should keep this in line with the web accessibility guidelines. You're welcome to use a <button> and maybe a data attribute, if needed.
JavaScript:
// (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");
myButton.addEventListener("click", event => {
// Prevents the link's default behavior:
event.preventDefault();
// Gives us the string: "#my-element":
const link = this.href;
// Finds the corresponding element:
const element = document.querySelector(link);
if (element) {
const leftPosition = element.offsetLeft;
// This line actually takes us to the element:
scrollContainer.scrollLeft = leftPosition
}
});
Couple things here:
You will need to change the various class names here, based on what your HTML markup looks like.
The only requirement for the offsetLeft property to be accurate, is that the scroll container has relative positioning.
Animation?
As a bonus, you could animate the scrolling, so it's not just an instant "jump". I would be happy to outline how to do that as well, just let me know.
If I get you right you want to scroll horizontally, to do so you can do it using jQuery:
<script>
$elementToScrollTo = $('#scroll-to');
$whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
window.scrollBy($whereToScroll, 0);
</script>
First line to select the element you want to scroll to
Second line to get the offset left (how far is the element from the left [in px])
Third line is to tell window to scroll in X coordinates
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
I have an absolutely positioned logo in the header bar of my page, that keeps moving down the page when scrolled.
I do not want this behavior, I want the logo to stick to the top of the page and not cover other elements when a visitor is scrolling down the page.
Here is the page in question.
www.giracci.com
and the header logo code.
logoWrapper {
float: left;
height: 0;
position: absolute;
top: 0;
width: 150px;
z-index: 30;
}
If you view the page, you'll see that it doesn't stay put, it scrolls with the page.
First:
Copy the relevant HTML and CSS to your question. There's MUCH more to the equation that you have not included. You need to essentially include all the html up to the nav container, as well as the CSS, and indicating that your question includes bootstrap (I've already done that for you).
Second:
The reason that it's exhibiting this behavior is because one of it's containers - the nav#site-navigation - is getting a fixed class applied to it when you scroll, which applies the following styles:
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
And, because you are using the bootstrap class of visible-lg on the logo wrapper, it gets this style:
.visible-lg {
display: block !important;
}
Which overrides the .fixed hidden property.
And, because the logo is inside that wrapper, that causes the logo to show up when you don't want it to.
So, you're using colliding classes, and need to straighten them out.
Add this to your css file:
No need to change much of the code.
your navbar is adding fixed class when it is scrolled.
nav.fixed .logoWrapper {
display: none;
}
First of all I would change these parameters in the css to display correctly the nav, to make sure that the menu items do not go below the logo:
.container {
width:auto;
}
.container.nav-bar {
width:auto;
margin:0 60px;
}
After you've done this, if you want to hide everthing when you're scrolling the page (logo and nav), add this to your css:
nav.fixed.scrolled {
display:none;
}
however, if you want that the only logo is fixed when you're scrolling the page add and edit these parameters on the CSS:
.logoWrapper {
position:fixed;
}
There is one more way around you can try. Because currently on your site it disappears at once so it feels like there is kind of a glitch/stutter, very slight. I needed something like this with my logo so I did it with JS. And it works like a charm. Here is the following code:
$(window).scroll(
function () {
var top = 75;
var currentTop = $(window).scrollTop();
if (currentTop > top) {
$(".logo").css("opacity", "0");
} else {
$(".logo").css("opacity", "1");
}
});
Simply replace .logo with your .logowrapper or whatever. Hope it works.
I have an IFRAME inside a dijit/layout/contentpane.
When the Iframe html renders larger than the contentpane size, there are no scrollbars at the or contentpane
Using overflow: auto doesn't help.
Setting the iframe's scrolling=yes displays scrollbars that do not work.
When I set the iframe e.g. height=1000, the contentpane then does provide scrollbars. (problem there is that the iframe declaration has no idea in advance how big the content that it will render will be, to be able to guess/kludge a height)
Any suggestions?
It would be better you can post your code, I have an iframe in ContentPane and it works correct. Here is my code (the point is you need set width and height 100%):
var reportCP = new ContentPane({
region: "center",
className:"wpt-report-pane",
content: put("iframe.wpt-iframe") // Here I use put-selector,you can use dojo.create as well
}).placeAt(myBorderContainer);
And Css classes:
.wpt-report-pane{
background-color:#ddd;
}
.wpt-iframe{
border: 0;
width: 100%;
height: 100%;
}
I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.
Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.
So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.
Any ideas on how to approach this?
Edit:
The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.
I solved this using mostly CSS. The advantages of this over the accepted answer is it will handle cases where the page size changes after the page is shown (such as browser resize, orientation change, or even more simple cases like collapsible/accordian sections). It also has much less Javascript code, and no layout math.
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}
The absolute footer caused jQuery Mobile page transitions to show a flickering footer (particularly the "slide" transitions), so I added this small amount of Javascript:
$(document).live( 'pagebeforechange', function() {
// hide footer
$('[data-role=footer]').hide();
});
$(document).live( 'pagechange', function() {
// show footer
$('[data-role=footer]').show();
});
Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.
For example:
$(document).on("pageshow", ".ui-page", function () {
var $page = $(this),
vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();
if (vSpace < $(window).height()) {
var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
$page.children('.ui-content').height(vDiff);
}
});
This code will run each time a page is navigated-to.
Here is a demo: http://jsfiddle.net/aBVtJ/1/
Check out this SO:
jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/