I am currently using isotope to organize my portfolio. I found that if I decided to place elements inside an isotope item and make these elements' position as fixed, they will not displace fixed on screen. Instead, these elements will use the isotope item's x and y position as the initial screen position. For instance, if I place an element as position:fixed and left:0; top:0; this element will not display on the top left corner of the screen. Instead, it will display on the top left corner of the isotope item.
Another issue I encounter is that the z-index of the element inside of the isotope item is not independent. If I give the element a greater z-index than other isotope items, say if the element has the z-index of 100, and all isotope items have the z-index of 10, the "portfolio_display" will still display behind all isotope items.
To explain what I am trying to achieve:
I want to make the isotope items become clickable, and when it is being activated, a full screen portfolio display will show up and take over the screen.
I do know plugin such as lightbox 2 will work. However, I like to have my portfolio display have much richer functions than lightbox 2. I want to put case study, images, videos, in the full screen mode, and each screen can be format like web page. So my method is to put multiple formatted divs into an isotope item, and use javescript (written by myself) to control their visibility and scrolling. This method works until I started integrate isotope to my portfolio.
I imagine isotope created a little "web page" inside of the bigger "web page" so it dictates the z-index and the position inside of its own. I like to know if I can disable isotope's dictation to its sub elements without breaking its great functionality.
Thank you.
For your full-window display purposes, you can change the modal overlay technique in this demo to your purposes. No plugin needed, you can put whatever you want to show in there, not just use it as an easy self-made modal.
Related
I'm implementing a login screen. It has a centred Column containing a TextField for entering an email address and a number of buttons for social sign-in. When a button is pressed, the Column is rebuilt with a CircularProgressIndicator (spinner) added at the bottom. I've wrapped the spinner in a custom widget that manages a ScaleTransition animation. That works OK, but the Column grows and shifts up to accommodate the final full size of the spinner immediately instead of moving smoothly with the animation.
I also wrapped the Column in an AnimatedSize widget using the same curve and duration as the ScaleTransition, but it hasn't helped. The root of the tree is a Consumer of the state that triggers the addition of the spinner so the animations should both be starting together. Maybe the the spinner needs to be permanent for this to work, but it doesn't seem desirable because its API doesn't provide a way to pause the animation. It would presumably constantly use some power to animate itself even when it isn't visible. I'm fussy about that sort of thing.
It looks like I might have to use an AnimatedList, but it doesn't seem semantically correct because the contents aren't really a list. So is there a more generic way to animate the size (and position) of parent widgets like Column and Center to track an animated size change of their children?
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
So, when I have some items with html content in it, and the fx = scroll, direction = left, the first item scrolls left, the container remains empty, then quickly the second item appears.
If I use images only, one image is one scrollable item, the items follow each other smoothly, so when the first item moves left, right after the second item also comes in from the right side.
Any idea what should I set, to make the plugin work properly?
My guess is its something with the width settings of an item, but I tried several settings, no one was good.
Thank you
Maybe your item is to big for the container? or someting with position absolute/relative? Coudl you show me some of your code (and images/div sizes?)
I found the solution (in stackoverflow). I have to use float:left on the div elements I want to scroll. Now they follow nicely each other.
#subdesign,
As nicely quoted by #RunningFusion may your item be too big for the container.
Try width: "100%" instead of specifying the width in px.
I have 5 Lists in my Form. They are hidden and when I show one of them, the focus go inside the List and the Form doesn't scroll. I want to show all the List, navigate across it and keep my Formscrolling showing that List.Is there any way to make a Listno scrollable?
EDIT/CLARIFICATION
I show a Form with a Button. When I press this Button a List is showed under the Button. When the focus enter inside the List, the Liststarts to scroll, but the Formdoesn't, and I can't see the other elements. What I want is...a List no scrollable and a Formscrollable that let me see the rest of the List.
By munon at 2012-02-03
In the photo, you can see, the CheckBoxes are in the List. This List has a scrollbar but is his scrollbar not from the Form.
There is no way to make a list none scrollable but that shouldn't matter. If your form is scrollable and uses the correct layout (e.g. BoxLayout Y), then everything should just work (assuming you revalidate after adding a new list).
Personally I would use Components/Containers rather than lists for a design as elaborate as this. They provide lots of advantages over lists such as more refined focus/touch behavior.