I'm developing an app mainly in HTML5/CSS/JS and I'm using framework7. Following the tutorials and all the documentation available I can't make a side panel appear... What am I doing wrong?
<body>
<div class="panel-overlay">
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Menu de Opções</p>
<p>Fechar Menu</p>
</div>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only open-panel" data-panel="left">
<i class="icon icon-bars"></i>
</a>
</div>
<div class="center">Home</div>
<div class="right"> <a href="#" class="link icon-only">
<i class="icon icon-back"></i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Menu</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm testing on Chrome, but nothing is happening... It is also not working on IE
Related
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-4 mb-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
</div>
</div>
</div>
</div>
You could try the following (a part of the solution was retrieved from this answer):
.card {
height: 100%;
}
.card-body {
flex: 0 1 auto !important;
}
.card-footer.text-center {
flex: 1;
}
I have created a small fiddle showing the result:
I've a bootstrap website but when i want that the panels are close together like on my screenshot.
As you can see the blue panel is far away from the panel above.
I want that the panel is like the green one but... i don't get it.
Tried to use all the cols in one row but it does not work.
Here is my source code:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Bootstrap</li>
<li>Foundation</li>
<li>Skeleton</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Hulp bij programmeren</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Stackoverflow</li>
<li>W3Schools</li>
<li>PHPTuts.nl</li>
<li>Codeschool</li>
<li>Lynda</li>
<li>Treehouse</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Generators</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Border radius generator</li>
<li>CSS Animation generator</li>
<li>CSS Box shadow generator</li>
<li>CSS button generator</li>
<li>CSS filter generator</li>
<li>CSS text shadow generator</li>
<li>CSS shapes generator</li>
<li>Google maps generator</li>
<li>Hash generator</li>
<li>HTML5 responsive form generator</li>
<li>Meta tag generator</li>
<li>Pricing table generator</li>
<li>QR Code generator</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Webdesign</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Flat UI Colors</li>
<li>Color shades generator</li>
<li>Freeimages</li>
<li>Dribbble</li>
<li>Behance</li>
<li>Line25</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
</div>
Just put the last panel block into the first .col-md-3.col-sm-4:
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Download bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
</div>
Demo: http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview
I can't seem to get this to work - my columns go full width.
Here's a JSfiddle for direct use
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li>
<a href="#p1" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
<li>
<a href="#p2" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!--Open Panel Controls-->
<div class="tab-pane active" id="p1">
<!-- HERE IS THE PROBLEM AREA - I want a grid here, but no luck :-/ -->
<div class="row">
<div class="column-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons
</div>
</div> <!--/row-->
</div>
<div class="tab-pane" id="p2">
<div class="row">
<div class="column-md-4" style="background: red;">
This is my first column, page 2
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons, page 2
</div>
</div> <!--/row-->
</div>
</div> <!-- /tab-content -->
</div> <!-- /panel-body -->
</div> <!-- /panel>
</div> <!-- /container-fluid -->
<script src="/scripts/bootstrap.min.js"></script>
Ouch, simple mistake. Here's the fix
<!-- It's col, not column -->
<div class="col-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="col-md-1">
I have a layout problem, summarized in the images.
Practically, I have two rows containing span4 divs. The problem is that one div of the first row is too high and it dictates the height of the row. In the second row, I have a small div, which would be great if it could fill the empty space of the row above. Is there a css3 trick to do that?
Please, take a look at the images. I've added a jsfiddle here:
http://jsfiddle.net/XmZwh/3/
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item 1
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>items
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The html comes out of a dynamic construction of a menu, based on items stored in a CMS, so I don't have so much control over that.
the only way to do this is by having a containing div that contains a and d,
Here is a jsfiddle link: http://jsfiddle.net/jQYtd/
<div class"cont">
<div class="cont2">
<div id="a">A</div>
<div id="d">D</div>
</div>
<div id="b">B</div>
<div id="c">C</div>
and the css
.cont {
overflow:auto;
border:1px solid #ccc;
}
.cont2, #a, #b, #c {
float:left;
background-color:grey;
width:30px;
}
#a, #b, #c{
background-color:green;
height:30px;
}
#c {
background-color:red;
height:60px;
}
if you have no control over the HTML you can use jquery to add cont2 div
to do that via jquery you would do something like this
$( "#a, #d" ).wrapAll( "<div class='cont2'></div>" );