I am working on react app project and i noticed that after click on hamburger menu i am getting that editing text mark like this: or like this .
It's also visible on some button when clicked, inside button text i am getting this editing mark.
I tested it on firefox and edge, and there is ok, this happens only in chrome.
So my question is how i can disable this in app, is there any css property or smth ? Ty for all soulutions :)
On buttons and other elements users can interact with you will want to apply a user-select CSS rule.
user-select: none;
Related
I have created a webextension with a popup window:
I want the user to be able to copy/paste the contents of this popup. This works fine in Chrome, but in Firefox the text cannot be selected. If you drag with your mouse over the text nothing happens.
I tried inspecting and changing the CSS (maybe there's a default user-select?), but without success.
How can I enable text selection in my extension's popup window?
TLDR: add -moz-user-select: text to the body element of the popup.
There is indeed a default user-select.
You can inspect the CSS of the popup using the following steps:
Navigate to about:debugging and enable add-on debugging.
Click the Debug link next to your addon.
Click the ellipses in the top right corner and select "Disable popup auto-hide".
Open your popup.
In the developer tools, select another frame by clicking the frame button in the top right corner.
Open the inspector. As you can see there is a -moz-user-select CSS rule:
So the fix is to add a CSS rule in your popup CSS like this:
body { -moz-user-select: text; }
Setting this to auto doesn't work. Other possible values are documented here.
I'm using twitter bootstrap (v3.3.7) and the following button was displayed just fine:
Open
After clicking on a link like this
File
the font-color of the button turns black. Reloading does not help, i have to delete all history data, cache etc.
This problem occurs in Firefox and Chrome, but not in Safari.
Does anybody have an idea what could cause this problem?
I hope it's possible to fix this without overriding the styles of the button.
EDIT
to clarify: the second link is not the same as the first one. So the style of the first button (a styled a-tag) changes after clicking on an other a-tag. In the developer tool it says that the font of the first button should be black, but it is white and therefore invisible, as the button is white, too.
It's not possible without overriding the styles of the button. What you're seeing is a:visited at work. You need to override this CSS rule to be the same as the unvisited a in order for the link to look the same both before and after.
One of the things I've always loved about the webkit inspector is that you can click into any selector and begin adding styles and watch them appear live.
I generally do all my debugging in Chrome, however needing to debug with the iPhone simulator I noticed the web inspector for Safari 7 doesn't behave like it used to.
The problem is that I can't seem to click into a selector to add/edit styles (like you can within the web inspector for ALL other browsers... even IE).
Am I missing something? I was not able to find an answer by searching, and the closest I found was this: How do you apply style rule in Safari Web Inspector?
Here is a screenshot of what I'm doing within Chrome:
And here is Safari 7:
I am using Safari Version 7.0.4 (9537.76.4). I believe this is the latest version.
I demonstrated it better with personal screenshots that I took while adding style rule:
Here is how the font color initially looked: #494949
For this example, I began by un-checking the initial CSS style color: #494949
I clicked right after the semicolon or ; after background: #FFF; and pressed enter. It put me on a new line as you can see in the picture below.
I entered color: #FFF; and it automatically applied it to the webpage. (You can also press enter after you are done writing the style rule.)
Here is the result:
Or you could also click the New Rule button shown below :)
I don't now is this can help you but theres is an answer about safari 6.x here
how do you apply style rule in safari web inspector
I haven't tested, i use elementary :D
in resume
First choose the {} brackets icon in the right sidebar
From the DOM model in the center white area of the web inspector- Click to select the HTML element you wish to view styles of. ( they will display in the right style sidebar )
On the right style sidebar: double click the closing brace on the existing style for the selector you wish to edit.
OR
Double click the open area beneath the "Style Attribute" drop down in that same sidebar to add your own styles to that particular element
If you need to change CSS digit value, for example you need to tune width or margin - use Alt + arrow up/down for 1px step or ALT + Shift + arrow up/down. Or you can just change the number with digits you need.
I currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen
I'm really hoping I can find a CSS expert to help with this odd problem.
In Chrome/Firefox and Opera this works fine.
However in IE9 and maybe earlier versions I have a problem.
To see the problem follow these simple steps.
1) Goto www.spoilertv.com and hover over the HOME button/link
2) Hover over the "Twiter Connect" button
3) The menu disappears.
The Twitter Connect button is a Twitter Anywhere button which basically creates an iframe.
Hovering over the twitter button causes the menu and hence the button to vanish. It's as if the mouse has moved away from the dropdown.
This all works with Firefox and Chrome and Opera.
I'm at a complete loss here :)
Looks like this is "designed" IE behaviour
IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!
I've had to replace the Twitter #Anywhere button with a custom button and signin function which removes the need for an iframe
https://dev.twitter.com/docs/anywhere/welcome#login-signup