When using the Angular material dialog i want to move the scrollbar from inside the dialog to the overlay. If i inspect the overlay in HTML i see that it has the following css on it:
I want to set pointer-events to auto and add a overflow-y: auto as well but i cant seem to access the class in my css. Does anyone know if / how we can change the overlay in a dialog?
Code:
modalConfig: MatDialogConfig = {
panelClass: 'custom-dialog',
CSS:
.custom-dialog {
min-width: 860px;
max-width: 860px;
height: max-content;
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
pointer-events: auto !important;
overflow-y: auto !important;
}
}
p.s. tried ::ng-deep but it doesn't seem to work
Related
Is there any way to add custom resize icon?
I didn't find any suitable solution in the docs. I've tried to add custom CSS rules for ag-header-cell-resize without any success.
That is just a div element with a gray background color, not an icon. You can customize it using css. The example below changes the resize div color to red and increase its size:
.ag-header-container .ag-header-cell-resize {
width: 15px;
}
.ag-header-container .ag-header-cell .ag-header-cell-resize::after {
background-color: red;
height: 100%;
top: 0;
width: 100%;
}
Live Demo
https://plnkr.co/edit/V7rbCuvYCVjkJIOb
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
I'm using https://github.com/vaadin/gwt-polymer-elements
Vaadingrid is really good.
This time I have a trouble about horizontal scrollbar of vaadingrid.
If the width of the content wider than the width of the browser.
When using on Macbook(TOUCH PAD), Mobile device it works fine.(like the image below)
http://imgur.com/GHyLrUq
However, when using it on computer(with MOUSE), it can't be scrolled.
No default horizontal scrollbar is shown up.
,,,
I tried to set "visibility: visible".
http://imgur.com/XwqpPRV
But it will always be overwrite by element.style
http://imgur.com/VgUCLuN
Hope someone can help me out.
I have found this fix:
You can edit vaadin-grid.html(located /bower_components/vaadin-grid/) and change this:
.vaadin-grid-tablewrapper {
box-sizing: border-box;
overflow: hidden;
outline: none;
position: absolute;
z-index: 5;
}
for this:
.vaadin-grid-tablewrapper {
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
outline: none;
position: absolute;
z-index: 5;
}
This is valid for me because vertical scroll can be used with mouse scroll.
I'm new in polymer and I don´t know how to modify css child element from parent, and that is the reason because I'm modifing the vaadin source directly.
So I'm trying to understand why jQuery-ui's autocomplete, with appendTo used to attach the results dropdown to a div, still dynamically positions the results with absolute positioning. Like this:
top: 38px;
left: 8.5px;
width: 251px;
Creating issues like:
Can I turn off this dynamic positioning? I would like full control over the UI for fluid responsivity and custom styling. I cannot find an answer online.
UPDATE:
So it seems that each widget has different rules, is this correct? I figured out responsive width for jQuery-ui Dialog popup by
$("#dialog").dialog({ width: auto });
& in my stylesheet, applying a max-width to the wrapping dialog class.
.ui-dialog{
max-width: 720px;
}
However top and left are still a mystery as of yet.
You can change the CSS used by either editing the jQuery UI CSS file, or else just overriding it in your own CSS, such as:
ul.ui-autocomplete { width: 250px !important; max-height: 300px; overflow-y: scroll; overflow-x: none; }
I'm having some problem to get the css work. I do not want the horizontal scrollbar to appear at the panel. Is there a way to make the panel width auto without setting a fixed width? I am using p:selectOneMenu in xhtml.
.ui-selectonemenu {
width: 158px !important;
}
.ui-selectonemenu-panel {
width: 200px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden !important;
}
I had the same problem, fixed it this way.
All block level elements are width:auto by default;
I can't be sure this will work without jsfiddle link, but try this:
overflow: hidden;
overflow-y: scroll;
I've worked around this problem by adding the following rule:
.ui-selectonemenu-list {
margin-right: 1em;
}
The highlighted item might not be completely covered in this case but it's better than scrolling IMO.
Edit
If you never want a horizontal scroll bar then the following fixes the problem nicely for me (highlighting too):
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
padding-right: 1.5em;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden;
}