For those people who are having issue with the navbar not scrolling (https://startbootstrap.com/template-overviews/sb-admin/). There might be a better way to do this, but I fixed it by adding the following to the css file.
.navbar-sidenav {
overflow-y: auto !important;
-ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
width: 0px !important;
display: none !important;
}
Good luck,
Greg
Took a while to figure this out. The above code allows for scrolling but the overflow messed up the tooltip. Had to modify a few other things to make it work. Add the extra css code below, change the javascript function below and add the class to the html file like the code below. Hope this helps some others...
CSS
.sidenav-not-toggled {
overflow-x: auto !important;
}
.navbar-sidenav {
-ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
width: 0px !important;
display: none !important;
}
JavaScript
// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav").toggleClass("sidenav-not-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .nav-link-collapseLink").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});
HTML
<ul class="navbar-nav navbar-sidenav sidenav-not-toggled" id="dashboardAccordion">
Related
I'm trying to hide the scroll-bar in ion-content (Ionic 4)
there's no ion-scroll on ionic 4 so I used the ion-content
but I can't find any css attribute to hide it (most of them not work)
I do want to scroll but I don't want to see the scrollbar
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
I've tried it but it doesn't work in ion-content.
Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar.
Need to use CSS Custom Properties. Add styles to global scope.
ion-content {
// overwrite inline styles
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
In Ionic 4 you must use following, because Ionic use shadow DOM:
global.scss
.no-scroll {
--overflow: hidden;
}
and in page
<ion-content class="no-scroll">
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
ion-content {
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
overflow: scroll!important;
height: 100%!important;
}
The <ion-content> is a custom element with shadom DOM. There's something called the ::part pseudo element to target an element in a shadom DOM element.
If you look at the shadow dom, you will see this:
Take notice of the part="scroll". Ionic did add parts to their elements that we can use via the ::part pseudo element to target this and apply our custom css to hide the scrollbar:
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
Tested this on iOS and Android successfully. I'm not getting it to work on Chrome though.
Try this, seems to work fine so far while preserving all functionality in Ionic 5.
// variables.scss
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
I have confirmed the following solution works in Ionic 5 although i do believe this should work in Ionic 4 as well.
As others here have noted, the scrollbar which controls the scrolling of content inside of an ion-content component exists in the shadow DOM within it and thus you need to target the scrollbar using ::part() CSS pseudo-element.
In your global style sheet add the following css declarations which will hide the scrollbar while retaining the ability to scroll:
/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
/* firefox */
ion-content::part(scroll) {
scrollbar-width: none;
}
Thank you #rostislav
Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)
solution: add these lines to both global.scss and variables.scss:
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
NOTIC: then clear browser cache and refresh page, it's great!
but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!
Refactored #Sergey Oleynikov solution and it worked perfectly for me
ion-content {
// overwrite inline styles
// --offset-bottom: auto !important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
Here is a hack? https://github.com/ionic-team/ionic/issues/17685
<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>
I couldn't find a reliable way to do this using the previously mentioned methods, they either didn't work or stopped the scrolling all together. My approach was to make the ion-content window wider than the screen.
.noscroller {
left: -10px;
width: calc(100% + 20px);
}
if you want to remove the scroll dynamically. You can use the approach of removing the scroll-y class from shadowDOM at <main class="inner-scroll scroll-y"></main> within <ion-content></ion-content>.
Firstly, import { Renderer2 } from '#angular/core' in your constructor(renderer: Renderer2)
To reach this, in your your-component.component.ts at event cycle ngAfterViewInit or onward.
This will remove the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
This will add the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
The Code from spicemix worked! I pasted the code in global.scss and not in variables.scss
/* global.scss */
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
For me it works after adding the no-scroll class in the <IonContent> element, as mentioned above, and after adding the following lines
useEffect(() => {
const style = document.createElement("style");
style.innerHTML = ".inner-scroll.scroll-y.overscroll { overflow: initial; }";
ionContent.current.shadowRoot.appendChild(style);
}, []);
Then in the render <IonContent ref={ionContent} className="no-scroll">...</IonContent>
The thing is that in these classes inner-scroll and scroll-y there is a overflow: hidden; style so we just have to override it.
I believe you can use
slot="fixed"
to make the element fixed thus removing the scroll bar by default for you.
Refer ionic documentation
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.
Can't seem to make the iframe appear with a scroll-bar.
Go to https://billiving-qa.azurewebsites.net/accountant
email: qa#billiving.com
pass: 111111
Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar.
My css uses the following:
.frm {
position: fixed; width: 100%; height:100vh; overflow-y:scroll !important; overflow-x:hidden !important;
}
html is as follows:
<iframe frameborder="5" class="frm" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>
You have hidden scrollbars in ionic.app.css:
::-webkit-scrollbar {
display: none;
}
I don't know if it is possible to override this style so probably you have to remove it. Similar question.
I have embedded an iframe n my page with content from another site.Here is a link if you want to visit it http://8mags.com/bored/wtf/wtf01.html
The problem is that I am unable to remove the scrollbars and a few other things.
My CSS code is here
html {
overflow-x: auto !important;
overflow-y: auto !important;
}
body {
overflow-y: auto !important;
background: white !important;
}
The problem is that scrollbar is still there.Also the background does not change to white inside iFrame.I also tried to hide a few details with this code
.quote-subtitle {
display: none !important;
}
but it does not work either.
EDIT
The code that produces the iFrame is this one
<span class="quora-content-embed" data-name="What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886">Read <a data-width="541" data-height="893" class="quora-content-link" href="http://www.quora.com/What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886" data-embed="nqjyswb" data-type="quote" data-id="2114886" data-key="78561af9adeb1d847ceae88107798254">Quote of Arjun Subramaniam's answer to What are some of the most awesome psychological facts?</a> on Quora<script type="text/javascript" src="http://www.quora.com/widgets/content"></script></span>
<body class=" logged_out" style="overflow: hidden;">
i use this on link and worked,and hidden the scrollbars.
or use this to access content of iframe
$('#iframe').contents().find('body').css('overflow','hidden');