I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I am using ant design with react for my project
when I am using the tooltip component, and I hover over the element, the tooltip appears and the scroll bar for a half-second and then disappears.
as you can see in this video https://youtu.be/Tyg61JVDgRc
anybody knows why?
at the moment the problem is only with ant design tooltip component, and is bugging and not following the position : 'fixed' so handing it to overlayStyle prop manually will fix the problem like <Tooltip overlayStyle={{position:'fixed'}}/>, I hope this helps. if youre still in trouble pass destroyTooltipOnHide propery
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.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
Folks,
So I am using a angular dialogue box, however, setting custom size for this dialogue box ruins the format inside the box.
I have created a plunkr for this. http://plnkr.co/edit/yXf1kNMqhAdo3iM8dFBy
If you look at the "save" and "cancel" buttons, they appear somewhere near center of the page even though they are part of modal-footer.
Does anyone know how to resolve this.
Thanks in advance
They are appearing to the right because modal-footer has a css property set as text-align: right. They flow off of the plunker because model-body is being set as 800px in your code here: modal.css("width",'800px');.
You can add a style to override this if you want:
.modal-footer.left
{
text-align:left;
}
Updated plunker
Hope this helps.