I am using responsive react grid layout in a container where i have expandable/collapsible side bar. As of now when RGL is getting loaded with all its data-grid items, it looks perfect however when i expand/collapse sidebar (which changes the parent div size of the RGL), RGL items doesn't get resized automatically. its works perfect with window resize however not with container size change.
I have tried modifying height/width pragmatically which works then placeholder and drag/drop starts failing
Anyone have a quick solution for this
Related
I'm facing an issue with as scrollbar package(React-Perfect-Scrollbar). Actually this is not issue but default behaviour of scrollbar functionality, while loading list of image. I've given default min-height to image(50px). So, initially scrollbar will cover the scroll area as per the current height of the div, but as soon as the image will load scrollbar adjust its size as per the new height because different image have different height. Because of the entire behaviour i'm seeing the fluctuation in the size of the scrollbar. Is there any way using that way i can overcome this scrollbar?
i have tried some CSS and react-perfect-scrollbar npm package features but not getting the required solution.
We're designing an application that processes images and highlights certain parts by parsing co-ordinates. However, images being larger in size can't be displayed in single go. Also image can not be scrolled vertically as I've applied no formatting as of now, only horizontal scroll works.
Now the requirement is to display the full image with scrolls enabled. Also, the image size vertically and horizontally should be resized when the boxes on the top and side are expanded and collapsed.
E.g. This is how the page initially loads with the sidebar:
Now, we can resize it when the need for sidebar ends as highlighted so as to get the entire view to image after collapsing the bar in the image after this:
Of course the top and side bar can be floating over the image or when the bars are expanded the image needs to be resized so as to not conceal any of its details.
We're developing this application in dot net MVC and image is displayed on the view. I'm not able to understand what would be the simplest approach to achieve this without using complex jQuery functions? And if there's no alternative to using jQuery then what other technologies in accordance to jQuery will be needed to achieve this? Is it also possible to achieve with simply HTML and CSS?
I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature
I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way i.e. i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.
Here is the js fiddle
http://jsfiddle.net/fahadnabbasi/2FLuf/11/
You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.
I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip
Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/
After including the plugin just add. You can also add a parent div and apply it to that with .parent():
$('.resizable').rotatable();
Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize
I'm working on the front end build of a set of HTML templates with a tricky element in the design.
As you'll see from the screengrab the main navigation is a vertical list which will contain nested lists of links where child pages and sections exist thus requiring the height of the menu to be flexible.
The design has a set of full width stripes in the background - header, centre and from beneath the main nav downwards. This is proving tricky to integrate as the dark blue background which goes the full width of the browser needs to be flexible and change alongside changes in the height of the main nav.
I have tried implementing the following solution from CSS tricks but it's causing various problems in various versions of IE.
I'm considering creating a blank absolutely positioned container that has it's height set by determining the height of the main nav via JavaScript but I'm worried about jumps in the layout on page load and again cross browser compatibility.
Any other suggestions on how to approach this?
It can be done with pure css bu not clearing floats. Basicly the idea is to have a div that wraps your nav and content, and float the content. The wrapper sould not have overflow:hidden. The float is cleared in footer.
Fiddle.
Tested FF4, Opera 11.50 and Chrome 12. Don't have IE on hand but it should work fine.