I am trying to customize the default scrollbar that appears in the Side Menu, along with the scrollbar in the page itself but am unable to do so. I have already referred to This but it does not seems to be of much use for the page and have got no clues about customizing the scrollbar in the side menu as additionally i need to reduce the space between the elements in sidemenu.
I also tried to hide the scrollbar with the following code but was of no use.
.no-scroll .scroll-content{
overflow: hidden;
}
You can add the following styles in app.scss
::-webkit-scrollbar {
width:0px;
}
It will reduce the size of the scrollbar to zero.
Related
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
I have managed to embed a PowerBi Dashboard into a webpage.
Unfortunately, it looks hideous. For example, the padding is ridiculous; The title is stuck in the top-left corner, which I'd like to remove; all the content is loaded into an iFrame, which if I do not set the height and width, makes the dashboard near-invisible and non-responsive (in terms of window scaling); nothing is centred...
I have tried overriding the CSS. For example, I tried to set the display: none !important; property on the header (to remove the title), but it has no effect. I also tried changing the background color of the iFrame from grey to match the color of the webpage, but that too did not work.
Does anyone know how I can style my PowerBI dashboard and embed it without an iFrame (is this even possible?)?
As far as I know, at the moment, it's not possible to embed anything from PowerBI to a web page without an IFrame.
Do you really need a dashboard, maybe a report would do it? At least you'd be able to place the components as you like.
I had the same issue. I managed to use CSS to re-style the iFrame for both reports and dashboards.
I'm using an angular project and added the CSS to my component that is displaying the Iframe.
border-width: 0; //Removes Iframe horrible border
I also adjust the height, width and position.
If you struggle to find what element to change the CSS, use the inspect element in Chrome and test by changing some CSS on each element.
I was able to hide and change the position of the title when I found what div it was in with:
visibility: hidden; //true to show
text-align: centre; //left or right
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the affix class to the right side it is taken “out” of the page and the width is strange. The affix class makes the element to have position: fixed. And that makes the width to no longer be relative to the parent, but to the document.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening.
http://codepen.io/anon/pen/zDieo
Thank you very much for your time
A quick fix would be add this to your css
.affix , .affix-top {
width: 800px;
}
Modified Code : http://codepen.io/anon/pen/gBHca
Try this - codepen
And read this - question
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?
I am wondering... Is there a way to hide horizontal scroll bar with GWT standard ScrollPane? I mean maybe not using outer CSS styles etc? Or you can recommend a more optimal way to achieve the effect?
...And concerning the CSS, right now I tried to set style like this for my ScrollPane
.a-scroll {
overflow-y: scroll;
overflow-x: hidden;
}
... but it seems it doesn't work and horizontal scrollbar is still visible :S So is there a workaround?
Thanks
By default the ScrollPanel's overflow property is set to auto (i.e., the scrollbar will appear as needed) to obtain the most cross-browser solution. So it's up to the browser to decide when to display such scrollbars. Also, calling scrollPanel.setAlwaysShowScrollBars(false) is useless since is already called at construction time (in the initialize() method).
Anyway I found that what you are requesting is a known issue.
If you want to always hide the horizontal scrollbar you need to set the overflow-x: hidden property on the scrollable element of the ScrollPanel (as you tried, but such panel is not a simple div with an overflow property on it). Try with:
public class MyScrollPanel extends ScrollPanel {
public void setAlwaysHideHorizontalScrollBar(boolean alwaysHide) {
getScrollableElement().getStyle().setOverflowX(alwaysHide ? Overflow.HIDDEN : Overflow.AUTO);
}
// ... and the like.
}
Remember that, if you set the above, in some browsers you will not be able to scroll horizontally anymore. Also overflow-x/y are CSS3 properties, while overflow is CSS2. So this might not be what you are after.
In such case some CSS tricks can help in order to hide the scrollbar but still allowing to scroll, something like this.
Anothe option could be using the CustomScrollPanel widget which allows, among other things, to hide the scrollbars by providing a, say, custom scrollbar with a zero-opacity style (not the best thing, tough).
Of course, another option could be to roll out your own div-based widget (maybe extending SimplePanel) with all the styles you need, as suggested in the issue.
Probably a little cheap, but the vertical bar width is added to the widget's width, which means the widget no longer displays fully. Hence the horizontal bar showing so you can scroll to see the stuff hidden via the vertical scroll bar.
If you go
scrollPanel.setAlwaysShowScrollBars(false);
scrollPanel.setWidth("normalwidth + 8px");
it should stop showing.
You can hide scrollbars if the content does not overflow the container using
scrollPanel.setAlwaysShowScrollBars(false);
If your scrollbars are still showing you may want to look at your content.