When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
Related
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl