I have this , and i want to move the total reviews(The ones that show how many reviews are with how many stars)
Here's how it looks https://i.gyazo.com/a766d0a8804da7ed34d4b295976414b5.png
The mark up is like
<div style="border-top: 1px solid #ddd; padding-top: 20px; vertical-align:top">
<div id="reviews-summary">
<p class="lead" style="margin-top: 0px;">{if $reviews}
<span id="product-stats">
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:{$review_stats.avg_rating*20}%">
<span class="total-reviews"></span></div></div>
</span>
</div>
<span class="average-rating">{$review_stats.avg_rating}</span>
<span class="total-reviews"> ({$review_stats.total} review{if $review_stats.total > 1}s{/if})</span>
I could've made first div inline block and give it a width of 50% but the line won't go across the whole div anymore. Any ideea is welcome.
Related
I am trying to view a Name and rating value and a star in a single line but I am thinking of if the name gets larger than the star and rating must move collectively to the next line but in my condition it first rating moves then star, is there any possible solution that if moving to next line then both star and rating value
like
Abdul* 4.5
if get more then
Abdul Wahab
*4.5
if bigger then
Abdul Wahab
amir *4.5
<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
<span>
<img src={Star} alt="" className="mb-2 p-1" />
<span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
</span>
</p>
if moving to next line then both star and rating value
Looks like you just need your rating to be solid block, so, you can force it to be solid with
<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
<span className="rating">
<img src={Star} alt="" className="mb-2 p-1" />
<span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
</span>
</p>
.rating {
display: inline-block
}
Or you can use display: inline-flex or whatever is better for your current layout and styling. You can also post your CSS, it will be easier to help you
A p element is a block element, it covers the whole width of its container and adds an inline box to its body where it can place inline elements. span and img elements are inline elements. Inline elements are subject to line-wrapping and you can place inline elements inside each other.
Solution: wrap the parts of the content where you DO NOT want line-breaking inside a span and set its css property white-space to nobreak. This content will then never line-break but this entire wrapping span, seen as an compund inline element in its surrounding may still break relative to other content in the surrounding box.
Check my primitive but meaningful samples and verify that the star and rating never separates with a line-break.
.container { text-align: center; background-color: lightgreen; border: 1px solid black; }
.w25 { width: 25px; }
.w50 { width: 50px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.nobreak { white-space: nowrap }
<html>
<body>
<div class="container w25">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w50">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w100">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w150">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
<div class="container w200">
<p>
<span>This is a name</span>
<span class="nobreak">
<span>☆</span>
<span>4.5</span>
</span>
</p>
</div>
</body>
</html>
I want to make li fill available width every line to make both side align.
sample
Here are my html and in-line CSS style.
Is there any CSS way to achieve this effect?
HTML:
<div class="row tag-cloud-wrap">
<div class="col-md-12 content-heading">
<a href="#">
<h3>
Find more Content by Keywords
</h3>
</a>
<div class="article-list" style="border: none">
<ul class="list-inline">
#foreach($videoData->keywords as $videokeyword)
<li style="background-color: #999;margin-right: -5px;margin-bottom:0;border-left: 1px solid white; border-bottom: 1px solid white; padding: 5px;">
<a style="padding: 5px;" href="#">
<strong>{{$videokeyword}}</strong>
</a>
</li>
#endforeach
</ul>
</div>
</div>
</div>
On div class article-list set width to whatever width you need the block to be.
Then on each li element add:
display: inline-flex;
You may have to play with it a little more to get exactly what you want, but this should get you started.
See: http://www.w3schools.com/css/css3_flexbox.asp for more information about Flex Boxes.
I am trying to set a vertical line with buttons in the middle with bootstrap.
Using Bootstrap simple vertical line:
<div class="row">
<div class="col-md-6" style="padding-right:20px; border-right: 1px solid #ccc; " >
Area 1
</div>
<div>
Area 2
</div>
</div>
Above only shows a vertical line, but I wanted to be able to add these right in the middle of that vertical line.
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
I couldn't really figure out how to position it using CSS. Is there a good way to go about this?
Any suggestions?
Edit:
I added -
<div class="round" style="position: absolute; top: 40%; right: -13px;">
<span class="glyphicon glyphicon-chevron-right" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
<div class="round" style="position: absolute; top: 55%; right: -14px;">
<span class="glyphicon glyphicon-chevron-left" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
It works, but the vertical line is in between the buttons.. Any suggestions on updating this?
Try this something like this
<div class="row">
<div class="col-md-6">
<div style="padding-right:20px; border-right: 1px solid #ccc; " >Area 1</div>
</div>
<div>
Area 2
</div>
You could use the after selector in css: http://www.w3schools.com/cssref/sel_after.asp
Using it you could do something like:
<div class="row">
<div class="col-md-6 myStyle" style="" >
Area 1
</div>
<div>
Area 2
</div>
</div>
.myStyle {
padding-right:20px; border-right: 1px solid #ccc; }
.myStyle::after{
font-family: 'Glyphicons Halflings';
content: "whatever the icon you want is";
}
You can then use CSS to position the icons however you want.
If you'd like to use more than one Icon you could use the :before selector on the button on the right, and the after on the button on the left.
I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.
EXAMPLE FIEDLE
<span class="top-head"> Recommended URLs </span>
<div class="c1">
<div class="item">
<div class="image">
<img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
</div>
<div class="descriptionContainer">
<span class="main-head"> Mashable - Business </span>
<span class="min-head">Title of link Title of link Title of link Title of link </span>
<span class="subcont">
<span class="fa fa-retweet"> RT 100+ | </span>
<span class="fa fa-twitter"> Tweet 100+</span>
</span>
</div>
</div>
</div>
Give fixed width for span class and add display block
.min-head { width:150px; display:block}
Will this help you?
span.min-head {
display: block;
font-size: 9px;
margin-top: 1px;
max-width: 130px;
white-space: pre-wrap;
}
Check the fiddle HERE
I am building a daily deal app to learn Ruby on Rails.
I'm now building the home page view. I would like it to be simply a vertical list of "cards" (see https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/), or more simply put, a vertical list of elements with each one being a horizontal rectangle with a grey border.
I'm new to Bootstrap and there are so many classes available.
Is there one I could use for these "cards", even if I have to override a little of its CSS afterwards?
Here is an example of the kind of "simple vertical rectangle list" I'd like to have.
Maybe class "list-group-item" but my rectangles are all separated as you see in the picture (i.e they're not touching each other) and I need a red title above each rectangle (i.e the title is outside the rectangle/item) so I'm not sure it's the right choice.
Is there a better match for the class in Bootstrap 3 for what I want to do?
What on top of my head is you spit out unordered list ul > list-group-item > div > more div > text
I made an example. checkout here https://jsfiddle.net/kuntau/X5Wvn/
HTML
<div class="container" >
<ul class="list-group">
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Tel: 011-345-898</strong></p>
<p>9182 Lorem Ipsum<br />
consectetur adipiscing elit.<br />
Nullam vel lacus felis.</p>
</div>
<div class="panel-rating">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<p>Rate Yourself!</p>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
.list-group li {
list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
float: left;
margin: 0 10px;
}
How about using panel with heading and grid system to fully utilize responsiveness:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Item title</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-3">first column</div>
<div class="col-sm-3">secondcolumn</div>
<div class="col-sm-2">3rd column</div>
<div class="col-sm-2">4th column</div>
<div class="col-sm-2">5th column</div>
</div>
With just a little bit of CSS to render vertical borders:
div.row > div:first-child {
border-right: 1px solid #ccc;
}
div.row > div:nth-child(5) {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
Check this fiddle: https://jsfiddle.net/bostaf/eqn93g6j/. Resize the viewport to see responsiveness in action.