Is that possible to resize two divs simultaneously using their common edge using html and css only? Is there some Angular2 way to do it?
I tried play with resize:vertical style but without luck:
enter link description here
I was hoping that outer div could limit resizing but it seems I was wrong.
PS I don't want to use jquery or work with elements directly from code because I work with ng2 and it is not a good approach to use such hacks, but I didn't find such functionality in ng2
Try ng2-split-pane. Not sure if this is what you need but there is a quick demo on the page that should clear that up.
It works by inserting a dragging anchor between two divs with the option of orienting them vertically or horizontally.
https://github.com/wannabegeek/ng2-split-pane
Have you tried
display: flex
display: flex-box
Related
I am a beginner in Javascript and I wonder if you can help me with this issue:
I am working on a webpage developed another programmer. the page has a lot of functionalities (buttons..etc)
I am trying to add a grid on top of all the page so that the buttons will still be clicable.
I made a png grid and put at the beginning of the body in the html file. The problem is that I cannot clic the button anymore under the image, even if the image is transparent. I also tried with table grid but same issue.
I saw that I might need to check the z-index, but before going this way I wonder if there is an alternative way. If z-index is the only way, will I have to check all the other buttons (there are a lot) and set a z-index to them as well?
best regards
Guido
I could be completely misunderstanding your issue because you haven't provided much useful information, but it sounds like you want a grid for visual purposes only?
If that's the case, you could try wrapping the contents that you want on top of the grid in a single div, and setting the background as the grid png you mentioned.
<div class="bg">
<button></button>
<button></button>
</div>
.bg {
background-image: url("grid.png");
}
I'm working with an image editor using JavaScript. It has multiple layers of images similar to Photoshop. How can I have a div of grid on top of all the layers and still be able to click and move the bottom layers? I'm using JQuery-ui for draggable and resizable.
Are there any hacks or workaround for this?
Try to use pointer-events: none on the grid/ruler element;
You can find examples here
It's been long since the question was originally asked but below solution might help for anyone visiting this question for implementing grid overlay for html/JavaScript canvas application.
Grid Overlay using css
one can easily play with z-index / background color to make element beneath grid overlay clickable.
In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout
I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.
Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV
You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle
I am using this layover plugin to display content: http://jquery.com/demo/grey/ I know there must be a simple way to add a drop shadow border to the layover, similar to: http://fancybox.net/ but I can't figure out what the best method would be. Any suggestions?
Check out the liquidCanvas plugin. It makes it very easy to add drop-shadows (and other things like gradients and borders) to any element.
There is a full write-up and tutorial at http://www.caffeinedi.com/2009/11/02/using-jquery-and-liquidcanvas-to-add-drop-shadows-borders-rounded-corners-and-other-effects-to-your-website-even-in-ie6-and-ie7/