I have a problem with text selection in Chrome. I have two spans styled as inline-blocks (same happens with divs). When I try to double click text inside one of the blocks all neighbor blocks are selected.
It can be solved by putting at least one space or newline between blocks. But that space will become visible and will break layout.
Demonstration (in Chrome 58):
Firefox works fine for both cases.
How to solve it without making mess out of the markup?
Source code:
span {
outline: 1px solid red;
display: inline-block;
min-width: 70px;
}
<span>Apple</span><span>Orange</span>
<br/>
<br/>
<span>Lemon</span> <span>Pear</span>
Instead of a normal space, you can use a Zero-width space:
Edit: ..or an element with font-size: 0 containing a normal space.
span {
outline: 1px solid red;
display: inline-block;
min-width: 70px;
}
<span>Apple</span><span>Orange</span>
<br/>
<br/>
<span>Lemon</span><span>Pear</span>
<br/>
<br/>
<span>Lemon2</span><i style="font-size:0;"> </i><span>Pear2</span>
I think I got it....
try adding this:
user-select: all;
so it would be this:
span {
outline: 1px solid red;
display: inline-block;
min-width: 70px;
user-select: all;
}
<span>Apple</span><span>Orange</span>
<br/>
<br/>
<span>Lemon</span> <span>Pear</span>
span {
outline: 1px solid red;
display: inline-block;
min-width: 70px;
}
<span>Apple</span><span>Orange</span>
<br/>
<span>Lemon</span> <span>Pear</span>
Related
I'd like to style a <button> element so that it looks and behaves like a link. In particular, I'd like the button's content to flow within paragraph text in the same way that an anchor or span element would. The basic css for making a "link-like" style, resetting the browser's defaults and adding link-ish styling, is something like this:
button.link-like {
/* reset browser defaults */
border-style: none;
background: transparent;
padding: 0;
display: inline;
white-space: normal;
/* link look */
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head><title>Test button links</title></head>
<body>
<div style="width: 200px; outline: 1px solid red;">
This is a <a href=''>just a normal link that wraps to two lines.</a>
</div>
<div style="width: 200px; outline: 1px solid red;">
This is a <button class="link-like">button that should behave like a link</button>.
</div>
</body>
</html>
However, as you can see from running the snippet above, the button's content does not flow within the paragraph, but instead breaks into its own block. It appears as though despite the display: inline, the button is retaining something of an inline-block behavior within the paragraph.
Can a button be styled such that its contents flows within a paragraph like a link?
You can try display: contents;
button.link-like {
/* reset browser defaults */
border-style: none;
background: transparent;
padding: 0;
display: contents;
white-space: normal;
/* link look */
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
<div style="width: 200px; outline: 1px solid red;">
This is a <a href=''>just a normal link that wraps to two lines.</a>
</div>
<div style="width: 200px; outline: 1px solid red;">
This is a <button class="link-like">button that should behave like a link</button>.
</div>
Picture:
.left {
border: 1px solid red;
}
textarea {
border: 1px solid blue;
}
.parent {
border: 1px solid green;
}
<div class='parent'>
<span class='left'>
<span>one</span>
<span>two</span>
</span>
<textarea></textarea>
</div>
Codepen
Why is my textarea higher up than its neighbor?
It's not.
Let me explain.
First, a bit of background:
Your span and textarea elements are (by default) inline elements.
Browsers normally provide a little bit of whitespace underneath inline elements for descenders.
To understand descenders...
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
Note the letters "y", "j", "p" and "g". These letters breach the baseline and are known in typography as "descenders".
[
Source: Wikipedia.org
The gap you're seeing is not margin or padding, but simply the browser providing room to accommodate these lowercase letters. In short, this is called baseline alignment.
baseline
The line upon which most letters "sit" and below which descenders extend.
[
Source: Wikipedia.org
So why, somebody might ask, does the browser provide this space for textarea, img, input and other inline elements, that don't need space for descenders?
Because the browser adjusts for the possibility that you may have text before or after one of those elements on the same line.
Now, to your image and code...
On first glance it clearly appears that the textarea is higher up than the span element. But if you take a closer look...
...you'll see they are perfectly aligned. Both span and textarea are providing space for descenders.
The borders you've added contribute to the appearance of misalignment because the textarea border wraps a clearly delineated box while excluding descender space, but the span border wraps the text and the descender space. If you remove the red border the misalignment is less pronounced.
In terms of a solution, here are two options:
Add vertical-align: bottom to the textarea rule, OR
Add display: block to the textarea rule.
Adam,
If you add the following to your existing css, you should get your desired results.
.left{
display:inline-block;
vertical-align: text-bottom;
}
textarea{
margin:0px;
vertical-align: text-bottom;
}
You can see a working example at the following url: https://jsfiddle.net/YOOOEE/z8pwpms6/
If you have two span elements, the high will be the same. Spans have display:inline; by default.
<span class="left">
<span>one</span>
<span>two</span>
</span>
<span class="right">
<span>one</span>
<span>two</span>
</span>
All browsers have defaults styles for textareas:
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
input, textarea, keygen, select, button {
margin: 0em;
font: 13.3333px Arial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
My solution:
.parent {
border: 1px solid green;
display: flex;
}
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
How can I remove the leading from the mandatory span so that the << has no additional space above and below.
The field row occupies a certain height based on the default line-height for the text size, the mandatory field however is taller because the font size is larger. How can I strip out the extra white space above and below the <<?
.fieldRow { /* for illustration only */
border: solid 1px #f00;
}
.mandatory {
color: #f00;
border: solid 1px #f00; /* for illustration only */
font-size: 24px;
line-height: 0;
vertical-align: middle;
}
<div class="fieldRow">
<label for="select">Some field</label>
<select name="select">
<option>Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="mandatory">«</span>
</div>
After removing vertical-align: middle it looks good to me.
.mandatory {
color: #f00;
font-size: 24px;
line-height: 0;
}
DEMO
Remove vertical-align
.mandatory {
color: #f00;
border: solid 1px #f00; /* for illustration only */
font-size: 24px;
line-height: 0 !important;
}
DEMO
I know this is old, but I had a similar problem and came up with a different solution.
It's a bit hacky, but you can put a container around the text, then use overflow hidden and give it a height. The extra space under the larger font will be cut off by the containing div. You're not getting rid of it, but your hiding it. This works for me, may not work in your situation though.
.container {
overflow: hidden;
height: 30px; /* Or whatever height is necessary to show the text */
}
<div class="container">
<span class="mandatory">«</span>
</div>
line-height: unset;
or
line-height: unset !important;
You've added various bits of styling which have added the whitespace in, namely the font-size of the mandatory span is different to it's container.
The border you've added also makes things look a bit worse than they are.
See this fiddle, it looks a lot better when you remove the above.
Revised CSS:
.fieldRow {
border: solid 1px #f00;
font-size: 24px;
}
.mandatory {
color: #f00;
border: solid 1px #f00;
border-top: 0;
border-bottom: 0;
}
My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.