I have this code that overlaps within the box range and I am wondering how can I line break when it overlaps within the box range.
Html:
<%
for(Notification n: notifications) {
%>
<li>
<a href="#">
<span class="message">
<%=n.getMessage()%>
</span>
<span class="subject">
<span class="time">
<%=n.getTime()%>
</span>
</span>
</a>
</li>
<%}%>
Image:
Not sure why the link isn't loading,
but you can use CSS
<div>
<h4>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<h4>
</div>
div {width: 100px;border: 1px solid red;word-wrap: break-word}
or JS
string = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
string = string.replace(/(.{1,20})/g, '$1<br/>')
document.write(string);
CSS would be the better option
https://jsfiddle.net/ednmstpz/
Try adding
white-space:nowrap;overflow:hidden;
To the li tag
Related
I have a problem. I work with mustache code to trigger the content.
Now I have a 5 star review rating in the website but to trigger the content without going in the code I made the overlay with the mustache code. Everything is working fine. But if, for example, in the source code the rating is 4.5 stars, it doesn't fill the stars. But in the source code the class is changed to bcrating4.5.
This is my code:
<span class="rating bcrating{{rating}}"></span>
The rating class is the original code from the site.
The bcrating is the class below in the CSS code.
The mustache {{rating}} is the trigger code.
<p id="hiddenrating" hidden>{{rating}}</p>{{#recommendations}}
<ul class="box-content box-related" id="viewed-product-list">
<li class="item" style="width:16.57%">
<div class="item-info grid_2 alpha"> {{#image}}
<a class="product-image" href="{{URL}}" title="{{name}}">
<img src="{{image}}" alt="{{name}}" style="width:50%">
</a> {{/image}}
<div class="product-details">
<a href="{{URL}}" title="{{name}}">
<span class="product-name">{{name}}</span>
<div class="price leden">
<span class="old_price">
<strong>{{old_price}}</strong>
</span>
<span class="new_price">
<strong>{{new_price}}</strong>
</span>
</div>
</a>
<div class="product-review-block">
<span class="fivestar">
<span class="rating-box">
<a class="nobr" href="{{URL}}#customer-reviews-tab">
</a>
<span class="rating bcrating{{rating}}"></span>
</span>
</span>
</div>
</div>
</div>
</li>
</ul>{{/recommendations}}
CSS:
.bcrating0 {
width:0%;
}
.bcrating1 {
width:20%;
}
.bcrating2 {
width:40%;
}
.bcrating3 {
width:60%;
}
.bcrating4 {
width:80%;
}
.bcrating5 {
width:100%;
}
If {{rating}} passes in a value of "4.5", your class name for that .rating element in HTML is bcrating4.5. HTML can have periods as part of a valid class name.
In your CSS you only have classes .bcrating4 and .bcrating5. Nothing matches.
You need to define a class .bcrating4\.5 where the period character is escaped, making it a valid selector in CSS that matches your HTML.
This is a handy character escaping tool: https://mothereff.in/css-escapes
its a sample HTML and I want to get links with mechanize-firefox,which is in <div class="testclass2"> not from others, how can I do it?
<div class="testclass1">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link1</span>
</a>
</span>
</div>
<div class="testclass2">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link 1</span>
</a>
</span>
<ul class="SelectList">
<li class="SelectItem">
<a class="SelectLink">link 2</a>
</li>
</ul>
</div>
You can use $mech->xpath to do that. All you need to do is build the right xpath expression to get all a tags under class="testclass2".
my #links = $mech->xpath('//div[#class="testclass2"]//a');
The expression is the most tricky thing about it. The // means anywhere under where you are. This is like div.testclass2 a in CSS.
I have a problem with my verified icon.
So what I actually want is that the verified Icon like on Twitter or Facebook is besides the Username and not in the next line under my username.
But it does not work.
<ul class="line">
<li>
<h3 align="center">Username</h3>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
Here is my CSS:
li.line {
list-style: none;
}
ul.line {
display: block;
}
h3 is a block element
change it to inline element
<ul class="line">
<li>
<span align="center">Username</span>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
If you don't want the list point, then I don't think li is what you'll want to use. A span or even a div could probably give you the look you're going for.
As for having them on the same line, try using the inline-block option for your css display element. It is similar to display: block, but it allows you to keep your elements on the same line.
Ive got the following for the parent div:
#parent {
overflow: hidden;
}
And the following for the inner div which is a drop down div. When click to show, a part of the drop down which goes below the parent div, is not displayed (only half displayed).
#dropDown {
display: none;
position: absolute;
}
and here is my HTML code:
<div id='parent'>
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>
</div>
I didn't see anything that called the #dropDown css. I changed the div#exportDivContent to div#dropDown and it hides the two . Is that you are trying to do?
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>
Well, I think the problem here is you setting overflow: hidden to the parent div. So, at first there is no overflow and the button is displayed properly. Then, when you click on the button, the height of it increases since there is a drop down list and hence, it shows only half of the list.
Try removing overflow: hidden [Edit] : or this:
<button onclick="a_function()" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
<script>
function a_function(){
document.getElementById("parent").style.height = "60px";
}
</script>
Disclaimer
This question is a repost. I originally asked it here. While there was one person who was kind enough to help me, he ultimately couldn't find an ideal solution. The reality of the situation is Doctype just doesn't have the huge number of users that Stack Overflow does. This is an important problem for me, and I really need more opinions on it.
The Problem
I've implemented a tree view using HTML and CSS. When an item in this tree view is hovered, a tooltip appears under it. Everything's works great in Firefox, but not in Chrome or Firefox.
My problem is the tooltip is using absolute positioning to allow its content to display over other elements. When I scroll in Firefox, the positioning of these tooltips moves to reflect their new locations. However, Internet Explorer retains the original position of the elements. Thus if I hover over a scrolled elements, the tooltip displays under wherever the element was originally located.
I've read this could be fixed by adding position: relative to my tree view, but this would prevent the tooltips from hovering over the entire page.
Here's some example code to illustrate my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<!-- import css files -->
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="tree-view">
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
</div>
<div id="main-content">
main
</div>
</div>
</body>
</html>
And here's the CSS for the example:
#wrapper
{
}
#tree-view
{
float: left;
width: 200px;
height: 400px;
background-color: #BBFFFF;
overflow: auto;
}
#main-content
{
float: left;
width: 600px;
height: 400px;
background-color: #FFFFBB;
}
#tree-view a
{
display: block;
position: relative;
}
#tree-view a span.tooltip
{
position: absolute;
z-index: 100;
display: none;
}
#tree-view a:hover span.tooltip
{
/* positioning */
margin-left: 1em;
margin-top: 1em;
display: block;
position: absolute;
/*formatting*/
text-decoration: none;
background: #DDD;
border: 1px solid #BBB;
padding: 5px;
white-space: normal;
width: 300px;
color: black;
}
#tree-view .tooltip strong
{
display: block;
}
#tree-view .tooltip .tooltip-info
{
display: block;
}
If the position: relative tag is removed from the tooltip anchor, the tooltips display correctly in Firefox. However, without it the tooltips don't display correctly in Internet Explorer.
Thanks for the help.
I stopped using my own Tooltips and switched over to Qtip (http://craigsworks.com/projects/qtip/)a while back. It's cross-browser tested, simple to instantiate, and looks outstanding. If you happen to be a ThemeRoller user, the beta version (available in the nightly builds) fully supports ThemeRoller styling. Overall, I'd highly recommend considering it to make life easy....it's just less brain-damage.
In the upcoming release of JQuery UI, there will be a similar feature built into the core. Similar scripts are available for Dojo, Prototype, and MooTools.
The code you posted works straight away in Firefox.
The tooltips don't show up in IE6, rather strangely you can fix this by giving the hover state of the anchor a background color...
#tree-view a
{
background-color:#ff0000;
}
I guess it just needs to have layout but the usual zoom:1; or position:relative; don't have the same effect
You can remedy the scroll bars by using...
#tree-view
{
overflow: display;
}