I don't want the default drag hand. I just want the normal mouse pointer and CSS isn't doing it.
You have to override CSS:
.a-canvas.a-grab-cursor:hover{cursor:default !important}.a-canvas.a-grab-cursor:active,.a-grabbing{cursor:default !important}
Related
Say, I don't like to use Anchor or Hyperlink, but prefer to use Clickable Label.
But After add ClickHandler for Label, & when I mouse over, there no little hand popup as we often see when using HyperLink or Anchor. So,
how to make the little hand pop up when using ClickHandler for Label?
you can acheive that in two ways:
With Gwt alone
lable.getElement().getStyle().setCursor(Cursor.POINTER);
and by adding css style to the lable(preffered)
lable.addStyleName(mylableStyle);
.mylableStyle {
cursor: pointer;
}
I have a vertical panel that contains a set of buttons. When clicking on the base button, the panel expands and shows the set of buttons that are part of the vertical panel. Since this base button is towards the bottom of hte UI, I have made changes to the CSS in order to make the expanded buttons appear flowing upwards as opposed to downwards. Nevertheless, it seems as if the page expands downwards in the expanded state, and this leads to an addition of a scroll on the page, which is completely undesirable.
Is there a way to add buttons to a vertical panel that builds up (is inverted) as opposed to building down? I would really prefer not to have to add the buttons in a different order and then play with the CSS again if at all possible. Thank you for your tips.
VerticalPanel is the wrong widget for your layout. You should use a PopupPanel and a very simple CSS. When a user presses a button, you show this PopupPanel by calling .showRelativeTo() method. It will do all the calculations for you, and it will show it downward or upward depending on the browser window size and position of your button.
Within the PopupPanel you add a FlowPanel, and you add your buttons to this FlowPanel. Apply this style to the FlowPanel:
.menu {
width: 100px;
}
.menu input {
float: left;
margin-top: 10px;
width: 100px;
}
It is not easy to just invert the direction as from my understanding you want the button panel to float on top of the existing page. Webpages follows a flow structure and do not get stacked up unless you specify.
You may have to change your entire layout into an absolute panel, or use CSS (as you said you do not want to but this is definitely easier than the former one) so you can place the panel anywhere you want.
CSS:
.button-panel{
clip: rect(auto, auto, auto, auto);
position: absolute;
left: 100px;
top: 319px;
overflow: visible;
}
Java:
YourVerticalPanel.addStyleName("button-panel");
I have a requirement to always show the menu icon in a a GridPanel's column header. See attached image. I've tracked down the css class and see the <td /> tag is assigned the x-grid3-hd-btn on hover. The x-grid3-hd-btn class uses a background image, grid3-hd-btn.gif to display the drop-down arrow I want, but I'm not css savvy enough to figure out how to always show it.
There doesn't seem to be a hook in the GridPanel class api's to always display this, wish there was. Also, note that I only want the arrow icon to show, I don't want the column header to change color, etc.
Does anyone have any guidance on this?
Thanks!
John
Add this to your stylesheet, this overwrites default extjs theme styles
/**
* EXTJS Grid-3 Always visible header buttons
*/
.x-grid3-hd-btn {
display: block !important;
height: 22px !important;
}
.x-grid3-hd {
cursor: pointer;
}
have you tried replacing the css class background image in your ext-all.css file?
original:
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow.gif);
}
replace to :
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow-over.gif);
}
tell me if that did it...
i was wondering on how to position a decorator panel that wraps around a table. i made a flextable and used the function 'setStyleName' that links to another css file. in the css file, i used absolute positioning with .position as the selector
.position
{
position:absolute;
right:0px;
}
however, every time i used the command position:absolute, the flextable will move but the decorator panel (the blue line) doesn't. it just becomes a blue dot. its probably wrapping around something that is 1px by 1px or something. help would be greatly appreciated as ive been super stuck. thanks!
Set position:absolute for the decorator panel instead of the table.
I don't know what are you to achieve, but maybe you should use "float: right" instead (if you want the panel to stick to the right side of the parent element)
I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.
I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?
Just got a response from the Developer Center help desk. I needed to add this CSS rule:
-webkit-user-select: none;
Add this to the CSS
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
Use these CSS rules:
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
This is also useful in protecting content that you don't want copied or saved, such as an image:
#yourdiv img {-webkit-touch-callout: none; }
This solved it for me, in JS:
document.getElementsByTagName("body")[0].addEventListener("touchstart",
function(e) { e.returnValue = false });
Seems to bypass whatever the OS has in there to catch the touch.
I found this out while trying it out myself. First of all you have to add this rule to the enclosing element:
-webkit-user-select: none;
But that, by itself, is not enough on the iPhone. It turns out that the magnifying glass can still appear because, for example, a parent element would accept selection, or just because it feels like it.
However, I then discovered something cool - if your element adds a touchend and click handler to an element, then Apple's Safari finally avoids the annoying code path that causes the magnifying glass to appear, probably realizing that this element is meant for some UI interaction, and not selecting text. On an equally awesome note, if you do this on elements near the top of the screen, it will also cancel the appearance of the navigation in landscape mode! Not sure however how to cancel the appearance of navigation when clicking on elements on the bottom, does anyone have a solution for that one?
On IOS 15.2 -webkit-user-select: none; fixed the issue, but only partially.
A long press doesn't show the magnifier anymore. However, if you double-tap and hold, it magically still appears.
There is still no 100% reliable way except event.preventDefault on touchstart. But this also blocks underlying actions so things like buttons with long-press tooltips break. Therefore, it is not always an option...