I have two elements that are activated with Hover.
The first element (1)
is background,
his hover chance the opacity.
The second one (2)
is text, (on top of the background element)
his hover change the underline, (decoration: underline).
I need the bottom element (background) to keep hovering even when the cursor is hover over the top element (the text).
the cursor is still within the borders of the bottom element.
thanks!
I tried to treat it like a tooltip but that's not the case
Related
Context:
I have an app (TinyUX) where people can draw wireframes. It uses a Flatlist grid, where each cell can have a background color, and an icon or text.
The text can be larger than the cell (50x50).
Assuming left text-alignment I created it so the zIndex went down with each cell (data.length - i)
Now I'm trying to add right-alignment.
So for some cells the text needs to overlap the cells to the right, sometimes to the left. But the background of the cell of either left or right (depending how I set the zIndex in relation to i will have the background overdraw the text.
It would seem logical to just make all texts have an zIndex that is higher than the rest of the cell, so they are all above the rest of the cell (icon(s), background colors). But I can't get that to work.
De cell component is nested something like this:
TouchableOpacity (has background color)
Image (positioned absolute, top left to parent)
Image (positioned absolute, top left to parent)
Text (positions absolute, top let to parent.
They have position absolute, so they can overlap.
With my current solution I can make either right or left alignment work.
Main question: How can a child of the renderItem component of a Flatlist grid, have a higher zIndex than every other cell in the grid.
Confusingly.. I just had it working when Metro was not connected, then restarted with Metro and failed again. The component uses React.memo(.. so now I'm not sure if I once was in a state with the fix..
Is it possible to get the caret position in pixels relative to the window. I need to get the caret position by space or by pressing the arrows. The thought arises whether it is possible to simulate a mouse click (since a mouse click has properties of the click coordinate) by pressing a space (that is, in a text field by pressing the space, the position of the caret changes), any ideas? This is necessary in order to position the block with a hint near the entered word. I managed to do this only by clicking the mouse, since I can get its coordinates
How do I go about changing the position and dimensions of a submit button in smalltalk/squeak? This is what I have so far:
submitButton: aModel
^PluggableButtonSpec new
model: aModel;
label: 'submit';
action: #submitName;
yourself
When I open a window in squeak, the button is really small and positioned in the upper left-hand position (the default position I assume).
This is the way I would find out:
You are using the class PluggableButtonSpec. Browse that (select the word, cmd-B/ctrl-B). That is a class in the package ToolBuilder-Kernel. I notice that it is a subclass of PluggableWidgetSpec. That seems to offer some layout related methods, like frame, margin, minimumExtent, padding, horizontalResizing (the setter has as comment "#rigid, #spaceFill, #shrinkWrap") and verticalResizing.
Perhaps I can find some examples of how these are actually used? Select PluggableButtonMorph and type ctrl-shift-N to get the class refs (or use the right-click menu). Hmm, the only user is ToolBuilder>pluggableButtonSpec. If I then click on the senders button in the class refs window, I get a window showing the 20 senders of #pluggableButtonSpec.
The first one is probably a good example, as it shows how the button bar in the class pane of the code browser is build. It uses a panel with a horizontal layout of its children. Then it creates the three buttons, of which the one with '?' gets shrink wrapped (just enough space to fit). These get added to the panel with a spacer between them. The result is a panel where two buttons divide up the resulting space, a spacer and a small button.
The other ones show the use of different layout methods.
I am looking for a way to get the caret x y coordinates inside a contenteditable div, in a similar manner to how you can get the mouse coordinates using window.event since I need to open a pop-up exactly where the user is with the caret inside the contenteditable div. How can I do this? Many thanks!
Here's one approach:
Coordinates of selected text in browser page
However, in some circumstances this will not give you coordinates, in which case you'd need to fall back to inserting an element at the caret, getting its position and removing the element again.
I have a form. It has a panel docked to the top and a panel docked to the bottom. The remainder of the form is a panel in the middle. I want it to expand to fill the remainder of my form so I set the dockstyle to FILL for this center panel. When I do this visually nothing jumps around but my resizing adorners move upward/downward behind my top and bottom docked panels. Now my resize adorners are the same size as the base form.
What am I doing wrong? My middle panel acts like it does not understand there is a boundary that is established by the top and bottom docked panels on the form. It just extends right past where I believe it should stop.
Try clicking on the middle panel that is getting overlapped by the other panels to select it, then right-click it and select Bring To Front from the context menu to fix the issue.
I recommend that you use a TableLayoutPanel, with one column and three rows. Set the Anchor property for all your panels to LEFT+RIGHT+TOP+BOTTOM, then set the row heights as you want. Fixed for the top and bottom, and "100%" for the middle.