I have span with contenteditable property. Most of the time the span is empty so I set fixed width to the span.
It works good in Opera and chrome I can click on the span and edit data. But with Firefox span behaves like there is no span.
E.g. When the span is empty in Firefox it doesn't appear as editable and I cannot click on it. When only one character is there, like space or something, then I can edit it. I tried to fixed that with html character but nothing.
$comment = ` `
<span class="edit_notes" contenteditable=true onFocus="clear_input('.$data['ID'].')" style="min-width: 1200px; display: inline-block;display:-moz-inline-box;" id="comment'.$data['ID'].'" onBlur="changeComment('.$data['ID'].')"> '.$comment.' </span>
For FF you may use a pseudo element to give it some size or use the :empty pseudo class if there is no white-space in HTML produced by server when there's no data to print.
Example below to test:
span[contenteditable][onFocus]:after, span[contenteditable]:empty {
content:'';
padding:0.5em;
}
<span class="edit_notes" contenteditable=true onFocus="" style="min-width: 1200px; display: inline-block;" id="comment'.$data['ID'].'" onBlur=""> </span>
<hr/>
<span contenteditable=true ></span>
Related
i use of display:flex for styling,
it styles elements correctly in chrome, but disrupts in fire fox.
my firefox version:99.0.1
chrome version: 100.0.4896.127 (Official Build) (64-bit).
my main problem:
why this behavior differently in FF & CHROME?
How fix that in FF, that also do not disrupt for CHROME?
.vendor-profile-pins__flag,
.vendor-profile-pins__location-pin {
display: flex;
}
.vendor-profile-pins__flag>img,
.vendor-profile-pins__location-pin>img {
margin-left: 6px;
}
.vendor-profile-pins {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<div class='vendor-profile-pins'>
<div class='vendor-profile-pins__flag'>
<img src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
<span> گزارش این صفحه به ما </span>
</div>
<div class='vendor-profile-pins__location-pin'>
<img src="{{url('/images/icons/vendorPage/pin-alt.svg')}}" alt='pin-alt'>
<span> از تهران، تهران </span>
</div>
</div>
result in chrome( desired, ok!):
bad result in firefoxe( two texts, goes(flows, drops) in second line):
MY answer:
i resolved this problem by this way:
i wrote width:16px; style for both <img> tags and resolved!
my mean of "resolved" is this:
in FF browser, like chrome, two texts, do not over flowed to second line.
but the thing that is important, is this:
in FF, the browser, increases the width of <img> tag, and for this reason, the text of <span> tag, over flows to second line!
but the Chrome, remains width of <img> tag and the width of <span> take width of it's text content(do not need to overflow it's text to second line).
solution in html codes:
insert style of width:16px; to <img> tag:
<img style='width:16px;' src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
When I hover over the table cell, it should show the Angular Bootstrap popover next to the text upon over. However, the 'span' element is still its full width.
<td style="max-width: 50px; text-align: left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<span popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="right" >This is some text. This is some text. This is some text. This is some text. </span>
</td>
Screenshot of issue
How can I get the popover to display directly next to the text?
I tried putting a max width on the span itself, but that didn't seem to work.
Think I found a solution:
1) Change the 'span' element to a 'div'
2) Add this styling to the div:
style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.