When I set mat-select as disabled I cannot copy value from this field using mouse. When I am trying to copy value from other disabled fields like text input this problem doesn't exist. Is there any way to do this?
So base on this answer: Prevent copying text in web-page I added this code to my main style.css file and it works now
.mat-select-disabled .mat-select-trigger {
user-select: all !important;
}
Related
In my opinion the higlighting of a TODO "flag" in the atom editor is too weak/unobtrusively.
How can I change this? I DON'T wanna list the todos in a sidebar (https://atom.io/packages/todo-show).
Here to compare:
In Vim editor there is very strong highlighting (desired):
In Atom editor:
The main problem is, that atom highlights many other code words in this color...
As GitHub's Atom Editor is built around HTML5 and CSS3 you can very easily change your style sheet, I've done a little recording on how to make this specific change below although you can apply the same principals to any styled element within the editor:
Step by Step
The first thing you will need to do is find an instance of the element you want to style, in this case I created a new, empty, file with the text //TODO: is too subtle.
You now need to find the appropriate selector for the word TODO, simply place your cursor in between the letters of the word TODO and press CtrlAltShiftP or select Editor: Log Cursor Scope from the command palette.
The selectors that apply to that location are listed from the least specific at the top to the most specific at the bottom, in this case you want the most specific selector at the bottom, go ahead and copy that into your clipboard.
Next you need to open your personal stylesheet, you can do this by selecting "Edit" and then "Stylesheet...", you can also choose Application: Open Your Stylesheet from the command palette.
Scroll to the bottom of the Stylesheet and paste in your selector from Step 2, you will need to add a period (full-stop) at the beginning to make this a valid selector.
Go ahead and add your preferred styling such your VIM style preference:
atom-text-editor::shadow .type.class.todo {
background-color: yellow;
color: black;
font-style: normal;
}
Finally save your stylesheet and switch back to your test document to see the resulting changes.
Thanks to zypro for pointing out that my original answer didn't account for the use of the Shadow DOM in recent versions of Atom.
Update: At some point, Atom got rid of the Shadow DOM. I'm using version 1.34.0 which takes the following entry in the above-mentioned stylesheet:
atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
background-color: yellow;
color: black;
font-style: normal;
}
Also, for Python (and some other languages) you will need to uncheck "Use Tree Sitter Parsers" in the Core settings.
I developed an mgwt,gwt-phonegap app and I installed it in ios device. I want to disable the cut ,copy and paste options to my text fields.
Is there any chance to do it through css? if not please provide me solution to achieve it.
This disable the copy / paste for everything except input :
*{
-webkit-touch-callout: none;
-webkit-user-select:none;
}
input {
-webkit-touch-callout: auto !important;
-webkit-user-select: auto !important;
}
You can use it to target your text fields only.
I'm using columntoggle mode because the output style is what I need/like. The system adds that row/button with "Columns..." (presumably so that you can pick which columns at run-time...which doesn't seem to work on my droid anyway. I just want to remove it.
Here is a demo: http://jsfiddle.net/ezanker/28tNw/
Basically you can just add the following CSS to hide the button:
.ui-table-columntoggle-btn {
display: none;
}
I'm using jquery UI to resize a div vertically(I.E. using the n handle). I'm using a helper so it only resizes after the user stops dragging. After a resize is done I call a function which sets dimensions on surrounding elements so they all fit within a container.
This works in both chrome and IE, but in firefox a css property of top is added which blows the div out of the container.
I've tried removing the top value after the fact, which works, but this is kind of a hack and also causes the div to 'jump'.
Is this a bug? Is there a workaround using jquery css html, etc?
To see what I mean check this fiddle and resize the element, if you inspect it in firefox there will a top css property but not in chrome.
Thanks,
Luke
In my opinion it is a bug.
Workaround: if you add a top: 0; to the css rule for #resizable IE, chrome and firefox have the same behavior. Also see the updated example.
=== UPDATE ===
It's a firefox bug. I walked from the jQuery UI resizable method code until the css method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css top value auto for not/static positioned elements, but returns 0px if relative position is set; in both cases top is not defined (they could be set to auto with no difference - it's the default value).
Also see this example.
In the resizable method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.
I'll report here if there is something new...
=== UPDATE ===
Now I have a workaround for you:
for the special situation you described set the css position of your resizable element manually to static.
Add to your stylesheets:
#resizable { position: static; }
Also see your updated example.
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.