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.
Related
I have build some "tags" that are above the title of my html construct in a line. The problem is they are not necessarily all filled with text. If one of these elements is empty it leaves the border "concentrated" on a "point". I tried it with the empty rule but its not working . I applied it to every element class in my code but not just "tags".
.tags:empty{
display:none;
height: 0px;
border: none;
}
<div class="tags"> <span class="icons2"> <p class="jobAreaDescription">{{jobArea}}</p> </span><span class="icons2"> <p class="leitung">{{leitung}}</p> </span><span class="icons2"> <p class="tag3">{{tag3}}</p> </span> <span class="icons3"> <p class="neu">{{neu}}</p> </span></div>
If you need more code just ask but I think this is sufficient.
Thank you.
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.
<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.
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.
I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;