Now I'm having trouble finding out how to get a list-group working. I want a panel on the left side, using col-lg-9. On the right side there's a selection menu, using col-lg-3.
I wan't this selection menu to dynamically change the content of the page. So when I click on item 1, the panel provides info that is meant to be for item 1.
So far I've come to this, but this doesn't work yet.
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9'>
<div class='panel panel-default' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<div class='list-group'>
<a href='#panel1' class='list-group-item active' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
<a href='#panel2' class='list-group-item' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</div>
</div>
</div>
</div>
If I understand you correctly, you need to combine that tabs and the item-list components.
Like 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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9 tab-content'>
<div class='panel panel-default tab-pane active' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default tab-pane' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<ul class='list-group'>
<li class="list-group-item active">
<a href='#panel1' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
<li class="list-group-item">
<a href='#panel2' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
</ul>
</div>
</div>
</div>
Related
I have ul list in div and if I set div height and overflow-y
It becomes scrollable.
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>
</ul>
</div>
However when I add items by append of jquery.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>Add this few times<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>`);
There never appears scroll bar.
Is this the way to make scrollbar for dynamically added <li> ?
How should I solve this??
There were a few syntax errors in your code.
You were also missing the closing quote in $("#mainul") though Michelangelo edited it.
This works below.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>
Add this few times<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>
</ul>
</div>
I have a list of item A, B, C, D, E. Each item you click on one of these list items there is a bootstrap class 'collapse' which shows a div with text in it. This all works ok. However, you have to click the list item again to collapse the div with the text in it.
I am trying to make sure when a list item is clicked on, all other openend divs are closed immediately.
I found something which mentions to use 'data-parent' but as seen in the snippet below this does not work. To see the problem view the snippet and expand snippet.
To replicate my problem these are the steps:
Click item A (you will see text appear 'A' underneath)
Click item B (you will see text 'A' still appear as well as 'B')
Click item C (you will see text 'A','B''C')
Click item A (you will now see 'B','C') but A has now collapsed
I am trying to make sure you only see the text related to the ID of the div you clicked on.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p> </p>
<h2>LIST ITEM</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseA" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseFood">
<span>A</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseB" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseVegan">
<span>B</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseC" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseJain">
<span>C</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseD" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseLunch">
<span>D</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseE" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseCocktail">
<span>E</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA" aria-expanded="true" >
<div class="intro">
A
</div>
<hr>
</div>
<div class="collapse" id="collapseB" aria-expanded="true" >
<div class="intro">
B
</div>
<hr>
</div>
<div class="collapse" id="collapseC" aria-expanded="true" >
<div class="intro">
C
</div>
<hr>
</div>
<div class="collapse" id="collapseD" aria-expanded="true" >
<div class="intro">
D
</div>
<hr>
</div>
<div class="collapse" id="collapseE" aria-expanded="true" >
<div class="intro">
E
</div>
<hr>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Restaurant Menu -->
</body>
</html>
You can do this with jquery like,
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>
On data-toggle="collapse" click, means on your list items click, all the div's which are opened (have the .in class with them) are close with the collapse function.
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</link>
</meta>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p>
</p>
<h2>
LIST ITEM
</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseFood" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseA">
<span>
A
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseVegan" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseB">
<span>
B
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseJain" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseC">
<span>
C
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div aria-controls="collapseLunch" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseD">
<span>
D
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseCocktail" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseE">
<span>
E
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA">
<div class="intro">
A
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseB">
<div class="intro">
B
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseC">
<div class="intro">
C
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseD">
<div class="intro">
D
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseE">
<div class="intro">
E
</div>
<hr>
</hr>
</div>
</hr>
</div>
</div>
</div>
<hr>
</hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!-- End Restaurant Menu -->
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->
I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->