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>
Related
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 was practicing bootstrap 4 carousal example given in http://v4-alpha.getbootstrap.com/examples/ . carousal caption is not visible when testing it for mobile or small screen. Any help please.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Remove the classes d-none d-md-block from all of the carousel-caption classes, the class d-none gives the caption a display of none and the class d-md-block gives it a display of block for md and above screens.
Note: you may need to adjust the text size on smaller screens to make everything fit if you have a lot of text in your captions.
Here's what you ought to do:
Remove class d-none.
Remove class d-md-block.
associated with the carousel-caption class of Bootstrap carousel.
Actually, just removing the class "d-none" will do it for you.
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'm having trouble with creating a carousel slider with thumbnail navigation in Bootstrap 3.
The problem is the carousel-indicators which needs to be inside the container to outline the rest of the content.
The result I'm aiming for is this:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
Does anyone know how to fix this?
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!