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.
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 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 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 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