I have found a way to disable the activation when an item is clicked by canceling its processing with beforeactivate. I would also like to disable the focus. The thin square around the item focused. Is there a way to do it in javascript, or shall I aim for the CSS directly ?
Many thanks,
M
I solved the same problem through CSS:
.fancytree-container,
span.fancytree-focused span.fancytree-title
{
outline: 0 !important;
}
Related
Background:
- I have a custom SharePoint masterpage with custom CSS.
- I also placed a custom div into the masterpage.html
Problem:
When I use the color picker to change some font color and select "more colors…", the modal dialogue box that comes up is too small and has scroll bars.
I would like for it to auto adjust.
How do I fix this?
I tried using F12 to figure out what CSS element may be affecting it, but I am unable to figure it out.
Note: I tried removing the custom div but the problem persists.
If I get two more reputation points I can upload a picture so you can visually see what I am talking about. A picture is worth a thousand words:/
Or you can go here to see the pic.
UPDATE:
I was able to figure it out:
I update the following custom css with 300px !Important:
#contentBox
{
margin-right:20px;
margin-left:20px;
min-width:300px !Important;
}
And I added the below custom css:
.more-colors-picker
{
margin: 0px;
}
For a complete history and explanation with pictures go here
Continuing with ZK studies, i had improved my knowledge about data binding and some .zul files components properties. So i read about properties of the Grids from here:
https://www.zkoss.org/wiki/ZK_Component_Reference/Data/Grid
My goal this time is to change the grid's paging button size (example of grid)
https://www.zkoss.org/_w/images/b/b9/ZKComRef_Grid_Paging.png
The document tells about paging, paginal properties and sorting but there is nothing about the property related with the buttons generated on the grid. Any suggestions about it? i'm glad to hear them out. Thanks for your time and attention.
These are things we need to solve with css.
I'll try to explain how we come to this, so you can css almost everything.
First of all, open your browser developertools and inspect the button element.
When you do that, you see what css class is added to that button.
In all 4 buttons we find the css class : z-paging-button
With this info we can adjust our css (in a css file or for fast local changes in a zul file with the style tag.)
<style>
.z-paging-button {
width:300px;
}
</style>
Sometimes, it's possible the css won't take, just try adding !important in the css.
Some example where you need to do this is for black digits in an disabled datebox :
<datebox disabled="true" style="color:black !important;" />
I have a block in my MailChimp email template something like this:
Latest news
[Introductory text]
[Repeatable news item]
[Link to all news on site]
The whole block is set to be mc:hideable, and the news item uses mc:repeatable.
The problem is that when I hover over the area inside the block but outside the news item, I see the eye icon to hide the whole block - it appears in the middle, over the news item. But when I move to click it, the news item's edit / repeat control appear and the block's hideable icon disappears!
Am I missing something? The only workaround I can think of at the moment is creating 3 blocks, the heading / intro (hideable), and the news item (repeatable, presumably that can be hidden by removing the default item), and the link. They'll each need the same background colour and to fit flush together to look like one block, and in order to hide the lot editors will have to remember to hide each part. Seems a bit long-winded.
Infuriating isn't it? Which is why I hacked Chimps own CSS by adding this to my template style tag CSS:
.tpl-hidewrap { left:auto !important; right:0 !important; }
Of course you could add different CSS to position it to suit your template, but it certainly worked for me, as the area to be hidden was wider than the repeating area.
Humans 1 Chimps 0 :)
KevAdamson's answer was a good starting point for me. I had to go one step further though:
.tpl-hidewrap {
left: 0 !important;
right: 0 !important;
display: block !important;
height: 100px !important;
text-align: center;
}
Does anybody can tell me where that blue border that appears after you push a PushButton comes from?
I really want to override that behaviour, don't know where or how though
UPDATE:
the effect I'm talking about turns out to be blue on Safari, it goes orange on Chrome and no effect on Mozilla
it occurs when the button has been pressed once, best way to explain it is the http://gwt.google.com/samples/Showcase/Showcase.html#!CwCustomButton
Are you talking about the "focus ring" that appear around any element when it's focused?
You can tweak it using the outline set of CSS properties: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
But please note that it's bad practice (re. accessibility) to completely remove it, as you'd remove any indication of whether the button is focused or not, and incidentally, which element is focused, if any.
This behavior should be defined in the appropriate stylesheet. If you check GWT sources that would be in /trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css. It's also defined in other themes.
What you should do is define your own styles
.my-PushButton
{
border : 1px solid #666;
padding : 0 10px;
}
.my-PushButton-down-hovering
{
background-color : #aaf;
}
.my-PushButton-up-hovering
{
background-color : #afa;
}
And then
PushButton btn = new PushButton(...);
widget.setStylePrimaryName("my-PushButton");
Hope this helps.
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...