been days im struggling with this. the problem is as follows...
I'm a newbie in the world of yii
So i have got a page 'resultat' and on selecting different menus, the content needs to be change through ajax.
Here the view:
<!--Content_Resultat-->
<div class="content_resultat">
<div class="header">
<div class="header_top">
<div class="centerheader">
retournez à l'étape en cours
</div>
</div>
<div class="header_bottom">
<ul class="centerlist">
<li><span>1</span> votre piece</li>
<li><span>2</span> votre exigence</li>
<li><span>3</span> vos autre apareils</li>
<li><span>4</span> votre utilisation</li>
</ul>
</div>
</div>
<div class="barre_titre">
<a href="#">
pour vous, lg vous propose
</a>
<div class="print">
imprimer la liste
</div>
</div>
<div id="container">
<?php echo CHtml::beginForm();?>
<div class="onglet">
<ul class="menu">
<?php $i = 1;
foreach ($data as $categorie) {?>
<li class="active">
<div class="onglet<?php echo $i;?>">
<img alt="no-picture" src="<?php echo $categorie->image;?>" />
<h4><?php echo CHtml::ajaxLink(
$categorie->titre,
Yii::app()->createUrl('getproduit'),
array('type'=>'POST',
'dataType' =>'json',
'enableAjaxValidation'=>true,
'update'=>'#carousel_container .contentWrapper #carousel_inner',
'data'=>'js:jQuery(".menu li h4 a").serialize()',
'success'=>'function(data){ $("#carousel_container li").text(data);}',
'error'=>'function(a,b,c){alert(b)}'
));?></h4>
</div>
</li>
<?php $i++; }?>
</ul>
</div>
</div>
<div class="carousel_tv" id="carousel_container">
<div class="contentWrapper">
<div id="carousel_inner">
<ul id="carousel_ul">
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
</ul>
</div>
<div>
<h1>No Content</h1>
</div>
<div>
<h1>No Content</h1>
</div>
</div>
</div>
</div>
<?php echo CHtml::endForm();?>
the data is being displayed through an xml.
the controller:
public function actionGetproduit(){
$obj_produit = new Gamme();
$produits = $obj_produit->get_produits('tv');
foreach ($produits as $data){
echo CHtml::tag('produit',array('style'=>'display:block'),CHtml::encode($data),true);
}
}
I need the data being send from the controller to be displayed on the view..
But unable to do it, any help plss
Thanks :-(
For ajax returns, you generally would can use renderPartial or echo the results as you have it, but the CHtml::tag functions you would usually pass an HTML object for the tag name, see here or here but it looks like your function is expecting JSON, so you would need to output your results as JSON, see the Yii JSON methods. If that's not the issue, you might need to explain a bit more.
Normally with Yii on ajax button or link or what ever the case might be, you do a on success
array('success'=>'js:function(data) {
jQuery("div#status").html(data);
}
and inside your controller, you can echo the response back to your view. Also make sure you have jQuery loaded in the view!
Related
I'm trying to make nested columns using bootstrap3, Logically everything is set well, but I can see that the rules for a specific size overwrite another size, for instance I'm applying some rules when the screen size is medium but it affects the large size, also the text appears on top of the images, I don't know where is the problem.
another question is there a way for the image to be resized ( scaled ) automatically?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
body{ text-align: center; }
img{ height:150px; width: 150px; margin: 0 auto; display: block; }
#media (min-width: 768px) and (max-width: 991px){
div{text-align: left;}
h1{margin-top: 0;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<section class="col-lg-2 col-md-4 col-sm-12 col-xs-6 col-xs- offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/4.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="clearfix visible-sm-block"></div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
</p>
</div>
</div>
</section>
<div class="clearfix visible-sm-block"></div><!-- as the elements have been broken at some break points-->
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/3.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
the result should be the following:
- 6 columns at the large screen
- full-width columns at a small screen
- 3 columns at a medium screen
Way for the image to be resized automatically use:
background-size: cover;
For styling rule use !important like
display: block !important;
If you press on menu item than go to another one it's not possible to go back to the one you came from, because all stay on active.
How can I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Both are possible using bootstrap's built in events. Put the following in your html just before the close body tag. This effectively removes all active classes from li's when the menu is shown.
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(){
$(".dropdown-menu li").removeClass("active");
});
});
</script>
Here is a fiddle
Bootstrap documentation
I'm using Bootstrap scrollspy to update a navbar. I want to change the color of the highlighted active li on the navbar to match the background-color of the matching section.but it is dynamic content
I know what data-spy attribute does and how to use it, but I do not know how the scrollspy plugin really works under the bonnet.so i can make a own code to work on it.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
above is the example of scrollspy. The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. need is to change color of active navbar to background color of respective position
This is an example of what I am starting with.
If you're wanting to change the background of the active (highlighted) navbar item to match the background of the current section, here's how I would do that:
First, listen to the activate.bs.scrollspy event. This event fires whenever the scrollspy moves to a new section. This would happen on the element with data-spy="scroll" or window if your scrollspying on the body element.
Within that event handler, look for .active to figure out which section is active. What you are looking for is an <a> element. Dropdown menus are the tricky part since there can be multiple .active elements. You need the final one. The way you get there depends on the markup. For the example you linked to, $('.active').last().children().first() would work.
With that done, you can grab href of the <a>, turn it into a class, and apply it to the navbar. You would also need to remove any classes this event has previously applied.
This gets you to have specific classes on the navbar for each section, dynamically applied only when that section is active. The rest is done with CSS.
The CSS will key off your dynamic class and apply a background to the active a elements. Bootstrap gets a little annoying here with all the classes that you have to override. For simplicity, I'm getting around it by using an id:
#navbar.bg-section2 .active a {
background-color: #28a745;
}
The bg-section2 is the dynamically applied class.
That is all that it takes. Below is a live example. Click "Full page" to see it better.
var $navbar = $('#navbar');
var currentClass = 'bg-section1';
$(window).on('activate.bs.scrollspy', function() {
var $active = $('.active');
var $link = $active.last().children().last();
// Classes have the form "bg-id" (with no # in the id)
var newClass = 'bg-' + $link.attr('href').slice(1);
$navbar.removeClass(currentClass);
$navbar.addClass(newClass);
// Keep track of which class is active
currentClass = newClass;
});
body {
position: relative;
padding-top: 50px;
}
section {
padding: 2rem;
color: #fff;
min-height: 70vh;
}
#section1,
#navbar.bg-section1 .active>a {
background-color: #007bff;
}
#section2,
#navbar.bg-section2 .active>a {
background-color: #28a745;
}
#section3_1,
#navbar.bg-section3_1 .active>a {
background-color: #ffc107;
}
#section3_2,
#navbar.bg-section3_2 .active>a {
background-color: #17a2b8;
}
#section3_3,
#navbar.bg-section3_3 .active>a {
background-color: #dc3545;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="collapse navbar-collapse bg-section1">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Section 3</a>
<ul class="dropdown-menu">
<li>Section 3.1</li>
<li>Section 3.2</li>
<li>Section 3.3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_1">
<h2>Section 3.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_2">
<h2>Section 3.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_3">
<h2>Section 3.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
</body>
I'd like to implement a slider such as Bootstrap Carousel to rotate through some text rather than images...
Is this possible as all examples I've come across are based on images.
Thanks
Yes you can show text only. I used an implementation on jsfiddle under technotarek/gXN2u/
The Following Example shows how you can use text instead of images.
setCarouselHeight('#carousel-example');
function setCarouselHeight(id)
{
var slideHeight = [];
$(id+' .item').each(function()
{
// add all slide heights to an array
slideHeight.push($(this).height());
});
// find the tallest item
max = Math.max.apply(null, slideHeight);
// set the slide's height
$(id+' .carousel-content').each(function()
{
$(this).css('height',max+'px');
});
}
.carousel-content {
color:black;
display:flex;
align-items:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<h3>#1</h3>
<p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#2</h3>
<p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#3</h3>
<p>This is the third item.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
I need to equally size the .media-body elements so they can grow up to the left limit of the page no matter the text they wrap.
<div class="container">
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur dipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
</div>
Here's the snippet
This seems to work...
<style>
.media-body {
width: 100% ;
}
</style>