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
Related
I am making use of PrimeNG and Angular 8.
The code snippet is as follows -
<div class="p-col-12 p-md-6 p-col-nogutter drag-column">
<div *ngFor="let doc of availableDocs" class="ui-helper-clearfix">
<div class="ui-g-12 ui-md-4" pDraggable="docs" (onDragStart)="dragStart($event, doc)"
(onDragEnd)="dragEnd($event)">
<p-panel [header]="doc.title" [style]="{'text-align':'center'}">
<img src="assets/images/{{doc.extension}}.png">
</p-panel>
</div>
</div>
</div>
If in above code we remove the class ui-helper-clearfix, then the image cannot be dragged.
But in documentation no such requirement is mentioned. Can this be done without ui-helper-clearfix.
Or some other solution as it is not the layout i want.
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.
I'm developing an Angular single-page app with a responsive layout. The current page I'm working on uses a tile-based layout that auto wraps extra tiles to the next row. The HTML is below and, in the responsive layout, it can show 1, 2, or 3 tiles per row depending on the width of the row (it positions them using floats).
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="tile_2">...</div>
<div class="tile_3">...</div>
<div class="tile_4">...</div>
<div class="tile_5">...</div>
...
</div>
Now each tile will be given a "Learn More" button. The design calls for a block to expand between the row of the selected tile and the row below. This block will be the full width of the row and will be closed when the user closes it or clicks on a different Learn More button.
My first thought was to arrange the HTML as below using ng-if to hide or display the expander divs but I can't figure out the CSS needed to have it display between the rows.
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="expander_1">...</div>
<div class="tile_2">...</div>
<div class="expander_2">...</div>
<div class="tile_3">...</div>
<div class="expander_3">...</div>
<div class="tile_4">...</div>
<div class="expander_4">...</div>
<div class="tile_5">...</div>
<div class="expander_5">...</div>
...
</div>
My second thought, since I'm using Angular, was to somehow use transcluding or including to insert the relevant HTML into the appropriate spot. Again, I can't figure out how to identify where I need to insert the HTML?
I've tried searching around for other people's solutions to similar problems since I figured its not that unusual a requirement but I haven't yet been able to find anyone else who is doing this.
Can anyone else suggest what I need to do to identify the where to insert the HTML or how to generate the CSS? Or even suggest another solution that I haven't considered yet?
Although I have 70% understand of what you mean, I think ng-class can simply solve what you've faced. The solution code is like below. And I setup jsfiddle.
Html looks like this.
<div ng-app="" ng-controller="MyCtrl">
<div class="tiled_panel">
<div>Tile 1 <a href ng-click="change_tile(1)">More</a></div>
<div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div>
<div>Tile 2 <a href ng-click="change_tile(2)">More</a></div>
<div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div>
</div>
</div>
Your controller code looks like this.
$scope.change_tile = function(value){
$scope.opentile = value;
}
$scope.change_tile(0);
Css looks like this.
.expander{
visibility: hidden
}
.close{
visibility: visible
}
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
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"