I am trying to use a dropdown list in the cell using the template.
When i try to open the dropdown it does not overflow.It is hidden.
Can you please let me know how to fix this.
I modified the original plunker to create a dropdown.
Here is the link to the plunker
http://plnkr.co/edit/94uZfo02rXBOmGoQn91J?p=preview
If I use cellClass: 'overflow' will that be ok.
.overflow {
overflow:visible;
}
modified plunker
http://plnkr.co/edit/qp5ujopzr0bvq73fPkZL?p=preview
The problem is from this class, either change it to visible or remove the overflow totally
.ui-grid-cell {
/* overflow: hidden;
or append this to your main.css
.ui-grid-cell {
overflow: visible;
and voila
Related
Using typeahead as cell editor for search, and in rows, and adding.
The problem is, when applying the typeahead for options, will show only inside the table.
I tried overflow: visible and it works that way
actions-button-cell:has(.MultiColumn) {
overflow: visible;
}
.ag-cel:has(.MultiColumn)l {
overflow: visible;
}
.ag-row:has(.MultiColumn) {
z-index: 0;
}
.ag-row.ag-row-focus:has(.MultiColumn) {
z-index: 1;
}
.ag-root:has(.MultiColumn),
.ag-root-wrapper:has(.MultiColumn),
.ag-body-viewport:has(.MultiColumn),
.ag-body-viewport-wrapper:has(.MultiColumn),
.ag-center-cols-clipper:has(.MultiColumn),
.ag-center-cols-viewport:has(.MultiColumn) {
overflow: visible !important;
}
In css this will show the options without hiding but the scroll from the aggrid row is gone cuz of overflow:visible.
Is there a way to show the dropdown options outside of aggrid without removing the scroll
Any help will be appreciated
sandbox link:
https://codesandbox.io/s/v1cqbz
One solution to this problem could be to change the position of the typeahead dropdown menu to be absolutely positioned, rather than being inside the table.
This way, the dropdown menu can be displayed outside of the table's overflow boundaries.
You can do this by adding the following CSS to your code:
.typeahead-dropdown {
position: absolute;
z-index: 2; /* make sure it is above the table */
}
You also might want to adjust the position of the dropdown menu by setting the top and left properties, to make sure it is positioned correctly in relation to the input field.
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've been trying many solutions and I can't seem to make this work.
I've found a solution that works for preventing the body to scroll when the modal is open:
body.modal-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
This works fine. The problem is, when I open the modal the body scrolls to the top. I don't want this behaviour, and I understand it has to do with the position:fixed. I tried relative, and it did not work.
Thanks in advance.
If I understood you well, you can do something like this with Bootstrap:
// Avoid scrolling
body.modal-open, .modal-open .modal {
overflow: hidden;
}
And then add .modal-dialog-centered to .modal-dialog to vertically center the modal.
https://jsfiddle.net/4938ek6q/
Please, play resizing the result window in the example linked above to check if that's what you are looking for.
Hope this help or at least point you to the right direction :)
I ended up figuring it out. What I did was removing the css I posted on the question, and then the following jquery adding a class to the html element, and in css styling that class:
JQUERY:
$(".modal").on('show.bs.modal', function(event) {
$('html').addClass('no-scroll');
})
$(".modal").on('hide.bs.modal', function(event) {
$('html').removeClass('no-scroll');
})
CSS:
.no-scroll{
overflow: hidden;
}
I have an ASP.Net Web Forms application that has the following CSS defined in a master stylesheet:
::-webkit-scrollbar {
display: none;
}
I'm working on a new page that pops up a modal dialog that will sometimes have vertical overflow. In this case, I need the scrollbar to be displayed for my overflow div. However, I can't find a default display property for ::webkit-scrollbar that resets the scrollbar to its original display state. I tried unset and initial unsuccessfully.
I also tried adding a .scroll class to the div I need the scrollbar to display for, and then changing the master CSS to:
:not(.scroll) ::-webkit-scrollbar {
display: none;
}
But that didn't work either. Can anyone help?
try this
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
display: none;
}
I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}