I'm using nw.js for html/css/js desktop app and cannot completely remove mouse cursor in full screen mode.
I've removed it by setting css properties cursor: none, margin: 0, padding: 0 on the body/html. And also toolbar: false and fullscreen: true are set in package.json.
But the cursor is visible a few pixels on all the edges of screen (picture bellow).
Strange behaviour, does someone know how to completely remove it?
NOTE: This is just an issue in NW.js, as it works perfectly in all browsers and also in the xulrunner, as we migrated in the company from xulrunner to node-webkit (nw.js) all applications got this issue.
I suspect another element is applying cursor:auto, essentially overriding your CSS rule.
Consider the following basic example:
html, body {
background:#000; color:#FFF;
padding: 0; margin: 0;
text-align: center;
cursor:none;
}
div {
margin:2em;
padding:1em;
background:#555;
cursor:auto;
}
<div>
<p>This div has cursor:auto</p>
</div>
As you can see, the element gets the normal cursor because it has a cursor:auto rule.
Since you did not provide your code, I can't know exactly which element is getting the rule, you can inspect in the devtools to catch it. Otherwise, you can override ALL cursor rules with this CSS line:
* { cursor: none !important; }
And to see that in action:
html, body {
background:#000; color:#FFF;
padding: 0; margin: 0;
text-align: center;
cursor:none;
}
div {
margin:2em;
padding:1em;
background:#555;
cursor:auto;
}
* { cursor: none !important; }
<div>
<p>This div has cursor:auto but gets overriden</p>
</div>
Edit: iframes
The cursor cannot be hidden in documents loaded through an iframe. The iframe would need to get that CSS rule locally.
See iframe demo: https://jsfiddle.net/azizn/rr7bsrc7/1/
I have also the same issue. I think the best solution for us would be to switch to Electron or wait until a stable version 0.13 of nw.js is released.
Related
I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.
I set cursor: pointer for .about > span, but when my mouse hovers on those texts in <span>, the cursor does not change into pointer mode. I would like to know why it is not working.
HTML:
<div id="firstdiv">
<div id="intro">
<h1 id="name">YOU CHIA LAI</h1>
<ul>
<li class="about">I am a Master of <span>Architecture</span>
candidate at Rice University.
</li>
<li class="about">I am also interested in <span>photography</span> &
<span>web design</span>.</li>
<li class="about">I wish you can know more <span>about</span> me.
</li>
</ul>
</div>
</div>
CSS:
#firstdiv {
position:fixed;
top:0;
left:0;
right:0;
height:100%;
width:100%;
margin:auto;
background:#E6E6E6;
text-align:center;
font-size:0;
z-index:-2
}
.about > span {
cursor:pointer;
font-family:Eurofurence Light;
padding:0 0 3px 0;
color:#01DFA5;
}
I messed with my css for hours, changing the positioning and z-index of just about every element on the page. I deleted every other element from the DOM except for the one with the cursor: pointer on hover, and it STILL didn't work.
For me, on Mac OSX El Captain V 10.11, the issue had to do with some sort of interference with Photoshop CC. Once I closed Photoshop, the cursor started working again.
Solution for me: Close and reopen Photoshop
Apparently this can happen due to many different programs including Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.
You need to change the z-index so that #firstdiv is considered on top of the other divs.
Just happened to me, and in my case it was due to a CSS rule pointer-events: none; which was set on a parent element and I forgot about it.
This caused any pointer events to be just ignored, which includes the cursor.
To fix this, you can just set the style to allow pointer events:
.about>span{
cursor:pointer;
pointer-events: auto;
}
Or directly in the element:
<span style="pointer-events: auto;">...</span>
cursor:pointer doesn't work when you're using Chrome's mobile emulator.
Also add cursor:hand. Some browsers need that instead.
position: relative;
z-index: 2;
cursor: pointer
worked for me.
For the last few hours, I was scratching my head why my CSS wasn't working! I was trying to show row-resize as cursor but it was showing the default cursor but for s-resize browser was showing the correct cursor. I tried changing z-index but that also didn't solve my problem.
So after trying few more solutions from the internet, I called one of my co-workers and shared my screen via Google meet and he told me that he was seeing the row-resize icon when I was seeing the default icon!!! He even sent me the screenshot of my screencast.
So after further investigation, I found out the as I was using Remote Desktop Connection to connect to my office PC, for some reason RDC doesn't show some type of cursors.
Here is the list of cursor's I couldn't see on my remote PC,
none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,
It works if you remove position:fixed from #firstdiv - but #Sj is probably right as well - most likely a z-index layering issue.
I had this issue using Angular and SCSS. I had all my CSS nested so I decided to remove cursor: pointer; out of it. And it worked.
Example:
.container{
.Approved{
color:green;
}
.ApprovedAndVerified{
color:black;
}
.lock_button{
font-size:35px;
display:block;
text-align:center;
}
}
.lock_button{
cursor:pointer;
}
The problem in my case was that the :after blocked mouse events, so I had to add pointer-events: none; to my :after block.
I have the same issue, when I close the chrome window popup browser inspector its working fine for me.
The solution that worked for me is using forward slash instead of backslash when 'calling' out from a local directory.
instead of backslash:
cursor: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;
Note: When I use backslash I am getting a net::ERR_FILE_NOT_FOUND
I changed it to forwardslash:
cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;
Note: When I use forward slash, the custom cursor style executes successfully.
This behavior regarding backslashes and forward slashes could probably be explained in this StackOverflow answer: Strange backslash and behavior in CSS
My problem was using cursor: 'pointer' mistakenly instead of cursor: pointer.
So, make sure you are not adding single or double quotes around pointer.
For me, the issue was that I had this set globally:
::-webkit-scrollbar {
display: none;
}
After removing this, cursor: pointer works as expected.
Remove parent z-index value fixed the issue for me.
Whatever you do, the cursor will not change unless you set the style against :hover
this needs to be as follows, in addition to the class you already have for the elements.
.about > span:hover {
cursor:pointer;
}
I found a solution: use :hover with cursor: pointer if nothing else helps.
Prevent user from selecting text, then use curser:pointer property -
.targeted-span{
user-select: none;
curser : pointer;}
Position the element as relative and then use z-index
.menu-toggle{
display: block;
width: 40px;
height: 40px;
border:2px solid white;
border-radius: 5px;
margin: 15px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: var(--light-bg-color);
z-index: 10;
}
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I have a canvas object in a div. The canvas seems to have a padding around it somehow. I want its edges to touch the edges of the browser screen:
// my html file:
<body>
<div id="canvasholder"></div>
</body>
// my java gwt code
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100%");
canvas.setHeight("100%");
RootPanel.get("canvasholder").add(canvas);
but yeah the page still has a ~20px margin around the canvas element. There is nothing else on the page beside what's copied above.
I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?
Thanks
------ Update ------------
I'm weirdly still seeing the padding, the firebug plugin is showing me that the body element has a 10px margin somehow:
// firebug inspection of the body element:
body {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none;
color: black;
direction: ltr;
margin: 10px; // huh?
padding: 0;
}
// my css file:
hml, body, div, canvas {
margin: 0px;
padding: 0px;
}
div.logParent {
position: absolute;
top: 20px; left: 20px;
color: black;
z-index: 2;
}
I had similar problem, the absolutely positioned div with canvas inside (added via JS so no extra spaces around) was causing overflow on page when I positioned div at the bottom of the page.
The solution was to set canvas display property to 'block' (didn't know it's 'inline-block' by default at the time) and now no extra padding is added and scrollbars are gone.
As you've correctly noted, browsers implement default styles for various HTML elements (and they're not standardised, so every browser implements slightly different defaults). For your purposes, given your posted HTML, you'd need something like the following:
html, body, div, canvas {
margin: 0;
padding: 0;
}
This does, of course, over-simplify things and it might be worth setting font-size and default color and background-color properties too (among many, many others).
References:
CSS Reset Reloaded, by Eric Meyer.
YUI reset.
And there are many others, though I really can only think of those two, the css-reset might be of use to you, though.
First the result in Firefox 4 Beta 8:
Button vs Div http://b.imagehost.org/0419/buttonSpace.png
The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.
Here the CSS file:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0
In that bug report there is a fix for the problem:
button::-moz-focus-inner {padding:0; border:0}
I think you have to set a width for the div
It looks like the padding you're asking for is not being applied. Have you tried setting it explicitly on the button?