i need some pointers here because i don't really know what to look for.
The project is in gwt and is using gwtquery.
I have this page with some elements and when the mouse overs an element it changes showing additional infos, let's call it header. When the mouse goes out of the header (which has some buttons so it need to stay visible once shown) it returns invisible.
The problem is that when the header is made visible all the elements of the page change position because my element changes in dimension. What i wish to do is to keep the element in the same position and overlap the header over everything with z-index.
It's not about GWT at first hand. It's mostly about general concepts of elements positioning and layout building for html pages. You should start from something like http://www.w3schools.com/Css/css_positioning.asp
And then find the appropriate tools in GWT framework or in third party libraries that are available.
Related
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
I'm using Dojo GFX to do some simple drawing, but having a problem with IE 7/8 (switching browsers is not an option).
If I create a div, set up a surface and draw some rects, they draw correctly relative to the div, so far so good.
However, what I want to do is create a widget, something with an embedded 'surface' that draws based on some widget-specific data. As such, I have a widget that contains a div, and I draw into this div. When I do that, the rects I create behave as if they are responding to a float:right, appearing in order they are created and ignoring the 'x' parameter.
I assume that this behaviour is something to do with CSS, but I haven't got to the bottom of it yet. Any ideas or solutions gratefully appreciated!
Updates:
I've disabled all stylesheets and I am not using style attributes. No difference to the behaviour.
I've inspected the markup that gets generated using IE8 dev tools. Apart from the different location of the containing div, the only difference I can see is that the v:roundrect elements have no child elements when created against the widget div, but they do have empty elements like stroke when created against the div referenced by ID.
Reading back through the docs, a difference I can see that might be responsible is that the postCreate method where I am doing my drawing is manipulating a div that has not been added to the dom yet, whereas drawing on a hardcoded div is done when it does exist. Maybe the difference in rendering is something to do with this? Is there a specific lifecycle function which is appropriate to draw in for widgets?
It seems that if you are going to use Dojo GFX and draw on DOM elements that are created as part of a widget in IE7/8, you must actually do the drawing in an override of the startup() method.
Drawing in the postCreate() method causes incorrect rendering resembling a float: left.
I have several list items with their parent ul delegated as the node for Dragdrop, this works fine by itself - it drags, it drops.
In the Droptarget, I have a DOM's worth of nodes which subscribe to mouseenter/leave events (I've yet to delegate that behaviour to a container, if its possible/effective). This also works fine, mousenter/leave events fire when I enter and leave each element.
The problem though, is when I am in the middle of a drag operation, and I drag over the Droptarget - which is the correct place for me to be aiming at. What I want is the mousenter/leave targets to continue to fire (because the element hovered over adds a border and background - so you can see what you're hovered over).
The result is the ability to drag a node over the Droptargets' nodes and have those nodes 'highlight' (with border as above) via mousenter/leave, and then I can drop.
So again, both work fine separately, but in unison the mousenter/leave events don't fire while I'm dragging. Does this have something to do with bubbling?
The above code is spread across a few intricate files at the mo', right in the middle of an application, but if the above is not understandable - let me know and I will paste some code.
thanks,
d
MAJOR EDIT:
Ooook. I was waaay off the mark. I do in fact have this working correctly - almost exactly the way I want. The problem is... the nodes being hovered while dragging are somehow positioned from top-left of the parent document. In a nutshell, I'm dealing with a dom's worth of Nodes in an iframe, they're now all set as Drop targets for the Drag objects in the parent DOM. When dragging over the iframe, the iframe Drop targets seem to be positioned very strangely.
Here's an example page now, too: http://codefinger.co.nz/projects/fpx/mod/project/dd_test_1.html
It fairly clearly outlines what is going on - there's two sets of nodes to drop the drags onto - one set (left) in an iframe, the other set (right) in a div in the parent DOM. The stuff in the parent DOM works fine, naturally, the stuff in the iframe exhibits the bizarre positioning. To see the positioning weirdness - drag one of the 'widget' list items over ... the list of widget list items :P You'll see the iframe nodes highlight, and when you drop the widget - the iframe node's contents are set, as intended.
Bizarre.
So this question should now be:
What have I done wrong here, to get these Nodes in the iframe positioned thusly? Is it that the Nodes are somehow cloned into the parent DOM as a proxy, or something else?