When using tabs in Materialize CSS, each tab is as tall as its content.
Info tab
Feedback tab
What do I do to make all tabs as tall as the tallest tab?
I know I can set a minimum height for the divs, but what I am really interested is to know if I can do it with a materialize helper or a materialize class.
HTML:
<div class="container">
<div class="row card hoverable">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#test1">Info</a></li>
<li class="tab col s3">Feedback</li>
<li class="tab col s3 disabled">QA</li>
</ul>
</div>
<div id="test1" class="col s12">
<div class="row">
<div class="col">
<h5>Location</h5>
<p>Lorem ipsum dolor sit amet</p>
<p>consectetur adipiscing elit</p>
<p>Cras vestibulum</p>
</div>
<div class="col push-s1">
<h5>Available Timings</h5>
<p>Mon: 8AM - 9PM</p>
<p>Tue: 8AM - 9PM</p>
<p>Thu: 8AM - 9PM</p>
<p>Sat: 10AM - 2PM</p>
</div>
</div>
<div class="row">
<div class="col">
<strong>ID:</strong> ABBS1243xA
</div>
</div>
</div>
<div id="test2" class="col s12">
<ul>
<li>Sorry, no feedback available at this time.</li>
</ul>
</div>
<div id="test3" class="col s12">Test 3</div>
</div>
</div>
I have a codepen here.
add this in your java-script
$(".tabs-content").css('height','1000px');
"tabs-content" is generated by materialize java script. Here I address that class using my java-script. 1000px can vary according to your need.
Hope this helps.
Related
I'm trying to figure out the horizontal version of https://stackoverflow.com/a/25298473/7835535. Instead of having the content scroll vertically, I want the content to scroll horizontally.
Fiddle taken from the original post
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
<span class="pull-right">
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="test">
CONTENT
</div>
</div>
</div>
</div>
</div>
Here You go Fiddle: http://jsfiddle.net/51n56p94/
You need to add this css
.tab-pane{
width:1000px;
}
.tab-content{
overflow-x:scroll;
}
I want to create this layout using Bootstrap. It should be responsive. I am unable to get things into place as I am using different rows for each image.
My code: https://jsfiddle.net/dxs2gdkg/
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-4 content-image">
<img src="http://placehold.it/200x200">
</div>
<div class="col-md-4">
<h3>State of Texas Approved</h3>
<h2>Online Drivers Ed</h2>
</div>
<div class="col-md-4 featured-image">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="row">
<div class=" col-md-12 main-list">
<ul>
<li>America's #1 Driving School - Most Selected Course Provider</li>
<li>Save a trip to the DPS! Official test included in the Course</li>
<li>100% Pass Rate - Guaranteed to Pass the Official Test</li>
<li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li>
</ul>
<div class="small-images">
<img src="http://placehold.it/200x100">
<img src="http://placehold.it/200x100">
</div>
</div>
</div>
You'd need one row to place all content, divide it into two columns. After left column should also be a row to be divided further into two columns.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/200x200" />
</div>
<div class="col-md-6">
<h3>State of Texas Approved</h3>
<h2>Online Drivers Ed</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul>
<li>America's #1 Driving School - Most Selected Course Provider</li>
<li>Save a trip to the DPS! Official test included in the Course</li>
<li>100% Pass Rate - Guaranteed to Pass the Official Test</li>
<li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li>
</ul>
<div class="small-images">
<img src="http://placehold.it/200x100">
<img src="http://placehold.it/200x100">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
I want to change my web app to material design and I included Materialize CSS into my project. I changed my old menu to something like this
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">Tab1</li>
<li class="tab col s4"><a class="active" href="#test2">Tab2</a></li>
<li class="tab col s4">Tab3</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
The text section has no animation like the .tab .indicator element.
I tried with onclick="Materialize.showStaggeredList('#test2') for a transition but it doesn't work. Is there some support for this type of transition ?
I have a 3 column row. On each column I have a thumbnail div, a title div and a details div. I am able to use Equalizer to make all the columns have the same height but what I would like to do is to have all the title divs to be of equal height across the same row so everything can line up nicely.
I have created a codepen and a screenshot. Any help would be appreciated.
http://codepen.io/renny/pen/VLNZRx
<div class="row">
<div class="small-12 medium-12 columns">
<div class="row" data-equalizer="row1">
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Event Banana
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Monday Event Number 2, with quite a long title, let's see how we manage to make it fit
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Voluptatem vel facere illum quaerat similique deleniti
</div>
<div class="card-content">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
Thanks!
Put an equalizer attrib on the main div and watch on individual title divs like so (omitting most of your code for brevity):
<div class="row" data-equalizer="title"> <-- this is your main div just before the first small-12
...rest of your code goes here
<div class="title" data-equalizer-watch="title"> <-- add watch on each of the title divs
Event Banana
</div>
...rest of your code goes here
<div class="title" data-equalizer-watch="title">
Monday Event Number 2, with quite a long title, let's see how we manage to make it fit
</div>
...rest of your code goes here
<div class="title" data-equalizer-watch="title">
Voluptatem vel facere illum quaerat similique deleniti
</div>
</div>
*tested with v5.5.2
I am trying to use bootstrap panels with bootstrap tabs. It works fine when one panel is in a tab, but as soon as I stick another panel in the tab, the tab functionality breaks:
<ul class="nav nav-tabs" role="tablist">
<li class="active">Contact Information</li>
<li>Lead History</li>
<li>Client History</li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
<div class="tab-pane active" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Contact Information</div>
<div class="panel-body">
<div class="well">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Open Tasks</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="tab-pane" id="lead">
<h1>Hello World</h1>
</div>
<div class="tab-pane" id="client">
<h1>Hello World Again</h1>
</div>
</div>
Here is the demo showing how the tabs break:
http://www.bootply.com/oCwV3bLFQl
As soon as you remove the second panel-default in col-md-4 class, then the tabs work again. How can I have multiple panels within a tab and have the tab continue to work?
Your last two .tab-pane divs were outside of the .tab-content div. Edited fork: http://www.bootply.com/WI7OzQ0nqu