How to make autosuggest suggestions be position above the dialog and not in the dialog? To avoid dialog content scrolling
Sandbox example https://codesandbox.io/embed/adoring-bogdan-pkou8
I don't know the libraries that you are using, but the outer dialog div element with class name MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-rounded needs an overflow: visible style.
And the MuiDialogContent-root div element needs overflow-y: unset.
For me this does the trick in the code sandbox.
To explain this behaviour: the dialog crops of everything that vertically overflows his boundaries and creates a scrollbar for that. Because the autosuggest component is DOM-wise inside the dialog component and positioned absolute it is cut off when getting bigger than the dialog. Telling the dialog to not crop it's content and not hide overflowing content by scrolling, lets the autosuggest component overflow correctly. But it also means you can't scroll inside the dialog anymore.
You should let the autosuggest component let its root element append to the body and position itself with the input field as pivot point. That way you don't have to manipulate the overflows, because the autosuggest is DOM-wise "above" the dialog component.
Add max-height to the Paper component that renders the suggestions.
renderSuggestionsContainer={options => (
<Paper style={{'maxHeight':100, overflow:'auto'}} {...options.containerProps} square>
{options.children}
</Paper>
)}
Related
I have a JQuery dialog on an page which opens to depending upon the size of the window. Unfortunately, I have been able to achieve in the containing div that is shown by the dialog a horizontal scrollbar when the minWidth of the containing div is reached in order that a user can scroll to the rest of the content. My relevant code snippet is as follows:
$('#containingDiv').dialog({modal:true,
autoOpen:false,
height:heightOfWindow,
width:widthOfWindow,
resizable:true});
$('#containingDiv').dialog('open');
/*css Code for containing Div element*/
#containingDiv{
min-height:900px;
min-width:900px;
overflow-x:auto;
overflow-y:hidden;
}
So, how can I achieve a position where if the dialog goes beyond the min-width of the containing div that the dialog window can then scroll to the content of the div?
Can anyone help me, please?
Solved by creating another inner div with min-width and the outer div with width along with overflow-x. This will provide the scrollbar to the dialog.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I have div with draggable, resizable and editable (contenteditable=true) functionality. This div
contain some text in it, which user can edit. My problem is that when user write the text in the div, the div size
is not expand automatically. I set its height:auto but this also not works. What should i do so that while
entering the text the size of div also increases?
If you're talking about jQueryUI's resizable plugin, then that's your problem. It sets an explicit height on the element, overriding your height: auto.
I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.
This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.
I have a draggable <div> with overflow set to auto to show a scrollbar when the content is too wide.
I want the entire content of the <div> to be draggable, so I have not added a handle. Now when I try to drag the scrollbar, the entire <div> is dragged instead of scrolling the content.
Is there a way of excluding an element from the handle of a draggable <div> in jQuery?
I need something like:
$("#element").draggable({
handle: "not(#thisTable)"
})
Is there a way of doing this with selectors or something like that?
tnx for your answer, but i found what i think is a better solution....
there is another option for draggable called 'cancel' and it excludes the selected element from the handle of the draggable element...
$('#container').draggable('option', 'cancel', '#excludedElement');
hope this helps someone else...
Add a div inside your div, width & height 100%, no margin, no padding, and put your content there. Set its overflow to default and set it as the handle. That way, the scrollbar of the parent div will no longer be in the handle, thus not initiating the drag.