I am using the Solution 1, the one true layout solution, from the stackoverflow question How can I make Bootstrap columns all the same height?
When more than 1 column in a bootstrap row is scrollable it seems to get overlapped by the other columns in that row. In the below example, only 1 of the 3 scrollable columns is visible while a similar column that is not scrollable also shows.
CodePen
html
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row sameHeightRow">
<div class="col-xs-8 sameHeightCol" style="background-color: grey">
test <br><br><br><br><br><br><br><br><br>
</div>
<div class="col-xs-1 sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">2</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">3</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">4</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
</div>
</body>
css
.scrollable{
max-height: 200px;
overflow:auto;
}
.sameHeightRow {
overflow: hidden;
}
.sameHeightCol {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
I've forked your pen.
I guessed that the Bootstrap styles somehow weren't playing nicely with your .scrollable and .sameHeightCol styles, so what I did was move them to the <ul>s like so:
<div class="col-xs-1">
<ul class="list-group scrollable sameHeightCol">
<!-- <li> -->
</ul>
</div>
This resolved the overlap issue, but then the 4 columns were too tall, so I wrapped them in another div and gave that div a height.
<div class="col-xs-4 columnContainer">
<!-- Original col-xs-1 divs now become col-xs-3 -->
</div>
.columnContainer {
height: 200px;
}
Hope this helps, and let me know if this wasn't what you were trying to achieve.
Related
In a card-tabs element from materialize css framework I'm trying to setup an ag-grid table.
Here is the code.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4" style="height: 200px;">
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The problem is that I cannot auto resize the height of the element with id='test4' in order to gird be viewable. If I remove the style="height:200px;" from it, the grid doesn't show up. If I added it's being shown but I don't want to keep it statically on 200px since the grid's height could be varied.
Is there any way to make the div with the id='test4' automatically resize itself according to the size of the ag-grid?
I tried to put height:auto; both in card-content and test4 divs but without any success.
Div will not be shown if there is not content in it. Why don't you just put blank   value inside html.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4"
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The following is part of my website. What it is supposed to do is create two side-by-side regions when there is sufficient width. Otherwise, the regions should be stacked on top of each other.
<body>
<div id="tab-container" class="tabs is-centered is-small is-fullwidth is-marginless is-paddingless">
<ul>
<li id="1" class="is-active">
<a>1</a>
</li>
<li id="2">
<a>2</a>
</li>
<li id="3">
<a>3</a>
</li>
<li id="4">
<a>4</a>
</li>
<li id="5">
<a>5</a>
</li>
</ul>
</div>
<div class="columns is-paddingless is-marginless" style="background: yellow;">
<div class="column is-paddingless is-half" style="background: indigo">
</div>
<div class="column is-paddingless is-half" style="background: black">
</div>
</div>
</body>
When the width is sufficient, the website looks ok:
However, when I shrink the website - and it transitions to stacked mode - the black and purple regions disappear.
How can I fix this?
I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.
HTML
<div id="forecastDiv">
<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>
<p id="forecast0TempC">0
</p>
<p id="day0">Test
</p>
</div>
<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>
<p id="forecast1TempC">0
</p>
<p id="day1">Test
</p>
</div>
<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>
<ul id="forecast2TempC">0
</ul>
<ul id="day2">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>
<ul id="forecast3TempC">0
</ul>
<ul id="day3">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>
<ul id="forecast4TempC">0
</ul>
<ul id="day4">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>
<ul id="forecast5TempC">0
</ul>
<ul id="day5">Test
</ul>
</div>
</div> <!-- end forecastDiv -->
CSS
#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }
https://codepen.io/mcmaster-99/pen/ybWvyy
add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.
<div class="container" id="forecastDiv">
So I have this navbar made with materialize
My code is:
<nav class="light-blue lighten-1 " role="navigation">
<div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>
<ul id="navbarUl" class="right hide-on-med-and-down">
<li class="active">Misiuni</li>
<li>NewsFeed</li>
<li>Clasament</li>
<li> </li>
<li id="navbarLi">
<div class="row">
<div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
<div class="col s6">Adyzds</div>
</div>
</li>
<li >
<div class="row">
<div class="col s4">Level:
<span>Value</span>
</div>
<div class="col s4">XP:
<span>Value</span>
</div>
</div>
</li>
</ul>
</div>
</nav>
My mouse is over the profile pic. I would like the hover effect to cover the name too. Also, I would like the Level value to be near Level.
Can anyone help me?
CSS:
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
#navbarImg{
padding-top: 10px;
max-width: 70px;
max-height: 64px;
}
#navbarLi{
max-height: 64px;
}
Your columns are too narrow for Level: + value. Instead of creating a row with 2 columns inside, try using seperate <li> for each:
<li >
Level: <span>7</span>
</li>
<li>
XP:<span>105</span>
</li>
As for your name, just nest it in a <a> element and materialize will know what to do with it.
Check out this fiddle: https://jsfiddle.net/pwxa6e80/3/ ... hope it helps :)
I'm trying to have my container divs background color extend to the full width of the browser. Right now I am unable to bypass the container styling set up by default in bootstrap, despite adding my own class to the container. The only styling that works is the background-color. I have also tried the following CSS, but it didn't make any change.
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
Here is my HTML:
<div class="container selection-section">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice" >SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
Here is my CSS:
.selection-section {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
}
Use container-fluid instead of container if you want the container to extend to the full-width of your webpage.
If it's only the color that's a concern surrounding the container with another div might work for you.
.selection-section {
background: #FDDC00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="selection-section">
<div class="container">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice">SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="well">Outside Div</div>
</div>