I have a popover through which I am displaying a drop down list. Currently the position is set to top. However the drop down is taking up too much space, so I want the popover to detect how much space is there and set the position accordingly.
Here is the code for popover:
<Popover
isOpen={this.state.showDropDown}
target={`dropdownbutton-${id}`}
toggle={this.toggle}
className={`dropdown-with-tags-popover ${this.props.className}`}
placement={this.props.placement || 'top'}
flip={false}
>
//code for list of users and search bar
</Popover>
Please comment if further information is needed
Related
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>
)}
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
I am trying to implement a hover effect on the rows of an Angular ui grid. When the user hovers anywhere on the row, the complete row is supposed to change its background color. However, I am using the expandable grid, which automatically creates a row header with the expand icon. Now the CSS rules either color the row header area or the data area, but never the complete row.
This is the hover effect on the row header:
This is the hover effect on any other column:
Did anyone find a solution for this?
Here is what I did:
In the right part of the table, I added the following to the cell template:
<div class="ui-grid-cell-contents"
ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }"
ng-mouseenter="grid.appScope.hoverRow = row.uid"
ng-mouseleave="grid.appScope.hoverRow = undefined">
To cover the left part, I changed the expandableRowHeader template (in the template cache, since it is not exposed externally):
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div class="ui-grid-cell-contents"
ng-class="{'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid)}"
ng-mouseenter="grid.appScope.hoverRow = row.uid"
ng-mouseleave="grid.appScope.hoverRow = undefined">
...
</div>
</div>
I do not like this solution. Firstly, I do not like patching a third party component. Secondly, the hover reacts slow: it takes half a second until between hover and color change.
So in case someone has a better solution, please post it here.
I'm so frustrated that I cannot solve this simple question.
How to programmingly set/active bootstrap tooltip?
For example, we are at page:
http://getbootstrap.com/2.3.2/javascript.html#tooltips
and let's open the chrome console and make tooltip work on the fly on the 'home' link in the left up corner.
var home = $($('.navbar li a')[0]);// select that home link
home.tooltip({title:'wthhhh'}); // set the default title
home.tooltip('show');
Step 3 doesn't bring up the tooltip.
Any help?
EDIT: I understand bootstrap has got a major update, but I believe it's irrelevant. Tooltip doesn't seem change.
By default bootstrap's tooltip is placed on top of the element, and since you're selecting the top nav bar, it's appearing off the screen - you can't really see it, but it's there.
If you change the tooltip placement from top (default) to bottom you will be able to see it correctly:
var home = $($('.navbar li a')[0]);
home.tooltip({title: 'wthhhh', placement: 'bottom'})
home.tooltip('show');
I'm currently working on a personal website where I have a lot of expandable items on my page. When an item is expanded I want to set the page scroll limit to the height of the expanded item, I don't want the user to scroll above or below the expanded item. I already tried scroll(0, yPosition) if the current scroll position is above or below the item, but that gives a very stuttering result... Does anybody have any suggestions on how to do this?
Thanks in advance!
You could hide all the previous content of your page, when an item is expanded, and when it is supressed, set the content visible again.