I have the following:
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
CSS:
.noselect{
-webkit-user-select: none !important; /* Chrome 49+ */
user-select: none !important; /* Likely future */
}
Now I disabled selectability for the spans with the universities. This works. However, when I select a user or even multiple users, and then copy paste this to somewhere else, the Universities are also being copied.
How can I disable this? I would like the user to not be able to copy the university names, but only the names of the users.This would also make sense, since only the users are selectable for the user anyways.
Other than HTML & CSS I am using React & electron, if this should be of any help. This is why I am only targeting chrome, and not ff or ie etc.
PS: The solution of this "possible duplicate" does not work for me. My text is not selectable, yet when I paste it, there is more text than I saw I had selected.
Related
<span style="float:left; padding-right: 5px;">
<span style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
//... and many more
The first span contains the university, the second span contains the name of the person. Now my problem is that whenever a I have a person who did not go to uni, I want to simply leave it blank.
But when I do that the name of the person moves up and is not aligned with the other names anymore. So in my example, Rihanna moves up:
I could write something like - or no uni, but I would much prefer to have a blank field there, as its just more tidy. I would also much prefer to have a CSS based solution.
Edit: If people downvote this, let me know why at least.
<span style="float:left; padding-right: 5px;">
<span style="visibility:hidden;"> </span><!-- Change is in this line -->
<span>Rihanna</span>
</span>
You can use "visibility:hidden" style. That way the height/width from the span will still be used while hiding the element.
I'm trying to set a custom icon for my Universal app's appbar. Segoe UI Symbol just doesn't have everything I'm after. I would like to use FontAwesome. Unfortunately, I can't figure out how to do that.
The only official way I can find to put custom icons into an app bar is to use PNGs, but these do not scale as well as font-awesome and are awkward to make.
The closest I've come is to create a div based element on the appbar which looks like an appbar button:
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
<div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
<i class="fa fa-flask" style="color: #000; font-size: 19px;
padding: 10px; border: 2px solid #222; border-radius: 50%;">
</i>
<br/>
<span style="color: #000; font-size: 12px;">Lab</span>
</div>
</div>
This produces something pretty close to an appbar button, which is clickable and can be assigned a behaviour
With some tweaking I believe I could get this to look identical to a button, however I'm not confident it will scale the same way that normal app bar buttons do. Also when hovering there is this nasty border around it:
Does anyone know how I can just use font-awesome, or some other font based icon set, directly in a button?
I've found an answer for this - it can be done quite easily using script. I used the DOM inspector to find that the actual HTML for the button image is like so
<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem"
aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
section:'global',tooltip:'testing out font-awesome'}"
data-win-control="WinJS.UI.AppBarCommand">
<span tabindex="-1" class="win-commandicon win-commandring"
aria-hidden="true">
<span tabindex="-1" class="win-commandimage" aria-hidden="true"
style="-ms-high-contrast-adjust: none;"></span>
</span>
<span tabindex="-1" class="win-label" aria-hidden="true">
Key
</span>
</button>
You can very easily target win-commandimage using either jQuery or straight JS and put a font-awesome icon directly in there
$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');
I find the icons a little small, but this can easily be fixed with CSS
#cmdKey .win-commandimage
{
font-size: 20px;
}
I encountered this issue yesterday.
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom'}" style="overflow: hidden;">
<button class="fa fa-flask" style="font-size: 2em; padding-bottom: 15px;" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'flaskBtn', section:'global', label: 'Lab', tooltip:'Lab'}"></button>
</div>
Javascript:
var myAppBar = element.querySelector("#appBar");
myAppBar.winControl.closedDisplayMode = "full";
This worked for me. To enlarge the font size, I had to use style="font-size: 2em" -- for some reason, the larger icon classes (fa-lg, fa-2x, fa-3x, fa-4x) don't work when declared in a class and it's within an AppBar.
class="fa fa-flask fa-2x" works if you create a Font Awesome element outside of an AppBar.
I have a contenteditable text structure like so:
<div class="content" contenteditable="true">
<span contenteditable="false">
<span class="chunk" contenteditable="true">This sentence contains </span>
</span>
<span contenteditable="false">
<span class="chunk bold" contenteditable="true">some bold</span>
</span>
<span contenteditable="false">
<span class="chunk" contenteditable="true">text!</span>
</span>
</div>
This enables selecting text across all 3 "chunk" spans. However, removing the "outline" from it using css disables selecting text:
.chunk {
outline: 0px solid transparent;
}
Can anybody explain why? JSBIN example
EDIT
It's definitely the EXISTENCE of the outline that's causing the issue. Giving it a 1px solid transparent outline still allows text selection. As soon as you specify 0px, it prevents selection.
I am having an issue with :hover on a glyphicon within a span.
I am not sure if the glyphicon is not filling the whole span, or if there are some hidden paddings/margins I am not seeing. I have tried to manual set all sorts of weird styles to get a nice glow border around my glyphicon but nothing is working.
Image (hovering over the gold color in this image)
Example
JSFiddle Demo
CSS
.glyphicon-stop:hover {
-webkit-box-shadow: 0 0 10px yellow;
}
View
<div>
<p id="hoverColor" style="font-size: 12px; width: 110px; background: black; display: inline-block; text-align: center; color:white; margin:0px; padding:0px">Color Code</p>
</div>
<div id="colorCode" style="margin:0px; padding:0px">
<span class="glyphicon glyphicon-stop" id="_Group Event" style="color: red; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Misc. Event" style="color:orangered; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Online Event" style="color:purple; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Group Party" style="color:blue; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Tournament" style="color:darkorange; font-size: 20px"></span>
</div>
JQuery
$('[id^=_]').hover(function () {
//alert($(this).attr('id'));
document.getElementById("hoverColor").innerHTML = $(this).attr('id').replace('_', '');
}, function () {
document.getElementById("hoverColor").innerHTML = "Color Code";
}
);
Any help on getting the border to be around JUST the glyphicon and not be offset would be appreciated!
This is not a solution, more an explanation about what there is going on. The behaviour is caused by the fact, that the bootstrap glyphicons not is filling out the entire area. They have all some built in "margin" or "padding". In your case you are using the following glyph :
.glyphicon-stop:before {
content: "\e074";
}
see all the glyphs here -> http://www.bootply.com/61521
here is a demonstration how much "margin" or "padding" the \e074 "video stop" glyph contains :
your fiddle forked -> http://jsfiddle.net/Ay9Mj/
That matches, surprise surprise, your bad experience in the question. So the error is the glyphs themselves, not some bad CSS or errors in the markup. I would suggest you go away from the "video stop" glyph, and use a fair square icon or simply just a rectangular <span>. Why use those glyphs anyway, when you just want to show a square?
In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.