I'm using MaterializeCSS and I'm looking to add and image inside of the "collapsible-body" of a Collapsible element... but it doesn't shows up.
It's possible to do what i'm trying some way? Maybe with CSS or JS?
here is my code:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
<img href="https://materializecss.com/images/yuna.jpg"><!-- Example image -->
</div>
</li>
</ul>
and ofcourse the JS to initialize the collapsible:
$(document).ready(function(){
$('.collapsible').collapsible();
});
Images use a SRC attribute, not HREF:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
<img src="https://materializecss.com/images/yuna.jpg"><!-- Example image -->
</div>
</li>
</ul>
Related
Im using bootstrap 4.0.0-beta.2 and I have a css problem.
I want following layout
This is the html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="task" class="container">
<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12">
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint></app-paint>
</div>
</div>
</div>
</div>
</div>
And what im trying to create is a layout of cards.
I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?
You may use height and margins.
Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)
margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0
html,
body {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
<div class="row h-100"><!-- class added -->
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 mb-0 mt-auto"><!-- class added -->
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
or do you need the second div to expand ?
html,
body {
height: 100%;
}
.custom-flex {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
<!-- class added -->
<div class="d-flex flex-column h-100">
<div class="">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column custom-flex">
<div class="card card-shadow custom-flex" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:
In your case for card shadow it would be
.d-flex [class*='card-shadow'] {
margin-top: 2.5em;
margin-bottm: 2.5em;
}
Use your own unit for css calculation em, px or whatever suit you.
Using Bootstrap's native classes, I have a list of .list-group-item elements, in which there are some clickable options, shown as dropdowns in the .dropdown-menu. By default this works fine, even when the dropdown of one .list-group-item element goes over the one below it.
What I've added then, is an animation declaration that fades in the .list-group-items by using #keyframes animation going from opacity:0 to opacity:1. And as a side-effect of that, every .list-group-item element goes visually over the dropdown menu from the previous one.
(there aren't actually any z-index declarations involved, I've only used that term in the title to illustrate the manifestation of the issue)
I am wondering if there is some kind of workaround for this overflowing issue that would allow me to keep the fade-in animation for the elements?
An example can be seen on the following fiddle (there is no javascript involved or included there as it is not necesarry, so both of the dropdowns are just declared as open in the HTML code to illustrate the situation):
https://jsfiddle.net/o8ysz4qp/2/
HTML:
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS:
.fade-in {
opacity: 0;
animation:fade-in .5s ease;
animation-fill-mode: forwards;
animation-delay:1s;
}
#keyframes fade-in {
from { opacity:0; }
to { opacity:1; }
}
The problems is that when the opacity is not 1 it creates a new stacking context (See The stacking context - CSS | MDN)
A solution is to add a z-index (since it becomes usable after the opacity change) and reverse their value (the last one has the lowest z-index etc)
Something like (assuming they are siblings)
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.list-group-item:nth-last-child(1){z-index:1}
.list-group-item:nth-last-child(2){z-index:2}
.list-group-item:nth-last-child(3){z-index:3}
.list-group-item:nth-last-child(4){z-index:4}
.list-group-item:nth-last-child(5){z-index:5}
.list-group-item:nth-last-child(6){z-index:6}
.list-group-item:nth-last-child(7){z-index:7}
.fade-in {
opacity: 0;
animation:fade-in .5s ease;
animation-fill-mode: forwards;
animation-delay:1s;
}
#keyframes fade-in {
from { opacity:0; }
to { opacity:1; }
}
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
As Gaby explained, animating opacity establishes a stacking context.
So instead of animating the opacity on each .list-group-item, you should place them all in a container and animate opacity there.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
opacity: 0;
animation: fade-in 2s ease;
animation-fill-mode: forwards;
}
#keyframes fade-in {
from { opacity:0; }
to { opacity:1; }
}
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
I'm using Bootstrap 3.
On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?
Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="upper" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="lower" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
<div class="col-sm-9">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.
I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.
It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).
You could do something like this:
Bootply Demo
HTML:
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
</div>
CSS:
#media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}
I'm trying to achieve a simple thing:
I'm taking the basic example of a list-group with badges from de Bootstrap 3 Components documentation here.
The problem is that I need a button in the beginning of the line, but that is making the main text vertically misaligned and the pull-right text aligned at the top.
Please check this bootply.
Thanks.
I modified your code like this:
See updated bootply: http://www.bootply.com/129053
HTML
<ul class="list-group">
<li class="list-group-item">
<span class="badge">67512</span>
<button>w</button>
<a href="#" class="margin-sm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</a>
</li>
<li class="list-group-item">
<span class="badge">67512</span>
<button>w</button>
<a href="#" class="margin-sm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</a>
</li>
</ul>
CSS
.margin-sm,.list-group-item .badge {
margin: 4px;
}
I don't know if that's your desired effect....
Hi I was using the following code to display an accordion since I have upgraded to bootstrap3 the accordion no longer works, I have tried to add a panel div but the accordion seems to work and then not work I can open each section but when I go back to the first it does not display and none of the others display either?
<div class="row add-top add-bottom-main">
<div class="panel accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading proxim-bg-one">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-two">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-three">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-four">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
The other issue I have is this line used to be hidden
<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>
I have updated the code and now it is displayed all the time?
<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">
am I missing something here?
thanks
M
In Bootstrap 3 the accordion markup is no longer supported.
But you can still get an accordion effect using the collapse functionality. There is an accordion example here.
http://getbootstrap.com/javascript/#collapse
Here is an example with your code.
http://www.bootply.com/94409#
As far as your last issue, it looks like bootStrap 3 has new helper classes.
http://getbootstrap.com/css/#helper-classes
hidden-xs applies to phones and hidden-sm applies to tablets.
So:
<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">