I have in React a tooltip component that is wrapping a button component.
How can I position the tooltip relative to the button position?
<div class="tooltip">
<div class="button"></div>
</div>
Here is a codesandbox you can play with.
You cannot do that with the way your markup is structured. I would suggest you making a div that wraps both the elements.
<div class="wrapper">
<div class="button"></div>
<div class="tooltip"></div>
</div>
You would then apply position relative to the wrapper element. Then you can use position absolute on the tooltip to position it however you want it according to the wrapping div.
Related
I want to implement resizable div like this but in react-> http://jsfiddle.net/T4St6/82/
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
I tried using css property (resize-horizontal) which works fine, but it comes on the right bottom and not on right border.
Is there a way to implement without using any library?
You can use it for this purpose. react-resize-panel
I am using Angular ui-router to navigate pages and flexbox as a grid type solution. I am attempting to reproduce Google Image Search Result look where the black expanding div opens under the selected image. I also need the route to change when the image is selected which I have working. However the div opens after all the divs in the row. Now after the row which the selected item is located. Any help on a ng-if, directive or script that could help me do this would be greatly appreciated.
EDIT: After thinking about it more I think I would need a script/directive that detected divs in selected's row and then inserted the ui-view div after the row.
Here what I have so far:
HTML:
<div id="container">
<a ng-repeat="item in professionals | filter:{cat: cat} | filter:query"
ui-sref="bids.item({item: item.link})"
ui-sref-active-eq="selected">
<div>
...
</div>
</a>
<div ui-view></div>
</div>
CSS makes div a flex element and wraps the square `a` divs contained.
Partial that opens when clicked includes:
<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">
I have a React component that renders some html like below, with one callback method (this.deleteItem) triggered upon click of an x. In the callback method, I try to get the content associated with each of the two refs like this
var date = this.refs.date.getDomNode.value;
var content = this.refs.content.getDomNode.value;
but the result is undefined in both cases. When I simply do this.refs.content.getDomNode (instead of looking for the value) it shows me a div with some span tags inside, and inside of one of those is the content I was seeking. Similarily with the date ref, it is a <small></small> element with spans inside.
Question: how to get the value/content from a div or element when react wraps content in spans?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date"> {date} </small>
<div ref="content"> {content } </div>
</div>
This is a known limitation of react, in that it wraps any floating text nodes in a span because it has to handle the data-reactid of the component. See this question too.
Perhaps if you tried to remove the white space around the content?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date">{date}</small>
<div ref="content">{content}</div>
</div>
Also try:
this.refs.content.getDomNode().children[0].textContent
to get the value of the span. (Not sure if there is a react specific function for this). This will have to be done as well as removal of the white space within:
<small ref="date">{date}</small>
<div ref="content">{content}</div>
This is important because react generates span tags to handle the data-reactid. Take a look at: Rid of repeated spans in React.js?.
<div ng-drag="true" ng-drag-start="onDragStart($data, $event)">
Draggable
</div>
The div is now draggable but none of the drag events are being fired i.e
ng-drag-start or ng-drag-move or ng-drag-stop or ng-drag-success
I do not have a drop area as I want the div to go back to its original position where it was dragged from.
What could be the reason? How do I fix this?
You have to wrap your draggable items in a ng-drop, Then you'll have access to the events like ng-drag-start and ng-drag-move
<div ng-drop="true" ng-drag-start="onDragStart();">
<div ng-drag="true">
Draggable
</div>
</div>
I want to use Fotorama.io to show HTML content. But it appears that HTML is not clickable inside slider. Is there any possibility to make it work inside Fotorama?
Use .fotorama__select class on your frames to make it clickable and selectable:
<div class="fotorama">
<div class="fotorama__select">One</div>
<div class="fotorama__select"><strong>Two</strong></div>
<div class="fotorama__select"><em>Three</em></div>
</div>
http://fotorama.io/customize/html/#selectable-text