I'm using fancybox 3 (version 3.3.5) it's working perfect.
I have also changed the position of the thumbs from Vertical (y-axis) to Horizontal (x-axis). This is also working good.
But, when I go to a smaller device (<800) the thumbs are Vertical (y-axis) which is good, but the scrollbar stays at the bottom and is not Vertical.
How can I fix this?
Since it is not possible to automatically switch axis, it would be best to simply check screen dimensions before applying your modifications.
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I have the following problem:
I`m using with angular 2 the polymer library, more precise paper-slider.
I had to put my slider from css from horizontal position to vertical. The problem is that now if I keep a click on the slider and I move the mouse left-right the slider moves up-down, how can I change the axes of the slider in order to use my slider in vertical position.
Kind Regards,
A developer in need :)
maybe you can use the s-slider element, there you can set vertical property
https://github.com/StartPolymer/s-slider
I'm trying to create a thumbnail navigation for a slideshow. Below the main images will be a line of what appears to be dots, when you hover over them a preview appears.
I got this from a tutorial that was originally designed to be a next and prev navigation, but I am trying to convert it.
http://codepen.io/smalltrades/pen/sjrqm
I would like the dots to be spaced evenly across the bottom of the window, but as I am not completely fluent in css I haven't been able to find the right combination of settings. Currently all the dots are stacked on top of eachother.
Any thoughts?
I have an mx:Tree, but when the vertical scroll bar appears, it overlaps the content of the tree (odd that the horizontal bar does not). That might be acceptable for the text, but the stripe that I create using the item renderer, for certain items, seems to make it an anathema to the QA guys. How can I keep this from happening?
I have an idea for a workaround: I could make use the item renderer to stop the drawing a little bit short of the right side of the view (not that I can reliably get the width of a scroll bar) but I can't even figure out how wide the displayable part of a tree is--all the properties of a tree seem to be about its entire width, which includes the entire area coverable using the horizontal scroll bar. However, the blue stripe signifying a selected item doesn't seem to have that problem--it stops short of the scroll bar. In any case, when trying to find the displayable region, I don't know if I could handle the added complication of when the horizontal scroll bar is moved. Much better if someone could tell me how to put the veritcal bar outside the displayable tree area (or shrink the displayable area, of course). Thanks.
I'm using the Flex 3.5 SDK
I was able to find the solution when researching horizontal scrollbar issue on list and tree component. The blog to which it links eventually shows a kind of hacky solution (in the readers' comments) that shows how to make sure that none of the drawing is done beyond a certain boundary.
I am using Flex 3 Column chart component. In this, I have a custom container which in minimized(25% of maximized screen) mode, it is not showing horizontal axis properly(in short not utilizing the whole container area properly) and hence H axis is cut on left and right. If I maximize container, it shows perfect graph.
Attached the image.
I got the problem.
The length of labels on X axis were causing this issue. I reduced the length of labels and it worked fine.