How to show the scrolling of Bootstrap table using a flex container?
https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables
I need DIVS of JSFiddle example. If I remove display:flex of .flex_container and I resize the browser It works, to appears scrolling in low resolutions, but I can't change the structure, I need that DIV.
Any idea? (JSFiddle example)
Thank you.
https://jsfiddle.net/fekula/49by5oL3/4/
<style>
.flex_container {
display: flex;
position: relative;
margin: 0 10px;
background: Red;
}
#main {
padding: 10px;
color: #000;
background: #fff;
flex-grow: 1;
position: relative;
}
</style>
Add max-width: 100% to #main to get a scrollbar for your table:
#main {
padding: 10px;
color: #000;
background:
#fff;
flex-grow: 1;
position: relative;
// add this:
max-width: 100%;
}
https://jsfiddle.net/m0aonz2k/
Related
I am implementing a tab layout in React. I have a tabs div which contain two more divs tab-headers and tab-container. The tab-container div contains individual tabs divs. The content in the tabs div vary in height and it always shrinks to fit the content. How ever I want the div to be the size of the largest tabs div. I do not want to use static heights.
This is the css:
.tab-headers{
display: grid;
grid-auto-flow: column;
width: fit-content;
}
.tab-header {
font-size: 1rem;
font-weight: normal;
padding: 5px;
background: var(--primary-bg);
padding: 5px 20px;
}
.tabs-container {
padding: 10px;
}
.tabs{
height: 100%;
background-color: var(--active-bg);
}
.tab{
width: 100%;
height: 100%;
display: none;
}
.active {
display: initial;
}
.active-header {
background-color: var(--active-bg);
border-top: 2px solid var(--accent-bg);
}
.tab-header:hover {
cursor: pointer;
}
This is what's happening:
you can use min-height and max-height properties in your CSS and set overflow to scroll if needed.
you can use min-height in your css.
I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?
This is my css for the slide show:
/=== SLIDESHOW SECTION ===/
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
position: relative;
}
#container > img
{
width: 100%;
height: 100%;
position: absolute;
}
#container > .btn
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 350px;
background: #000000;
color: #ffffff;
font-size: 20px;
}
#container>#btn1:hover
{
box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
box-shadow: -10px 0px 20px 0px #343d46;
}
#container>#btn2
{
position: relative;
float: right;
}
picture of the problem
change your
#container>#btn2
{
position: relative;
float: right;
}
to
#container>#btn2
{
right:0;
}
Try adding this before #container>#btn2:
#container>#btn1
{
position: relative;
float: left;
}
Absolute positioning generally shouldn't be applied to classes (multiple elements).
I would remove the absolute positioning on your .btns and use flexbox on your container, like so:-
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
display: flex; /* adds flexbox to container */
align-items: center; /* vertically aligns everything in container */
justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}
You can then add padding to your container for finer adjustments of your buttons horizontal distance from the container edge.
I have a flex container, with few li elements inside. While adding more li elements inside, the container scretches together in above and down sides. I don't want it to move any further in up, only in down direction.
You can check it on my JSfiddle
Try to add few li elements, you will see that container is scretching. How to block it?
Try this out and see if it is what you are going for. If not I may need some additional info.
.mainContainer {
width: 100vw;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
}
.content {
min-height: 350px;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
position:relative;
margin:0 auto;
display:block;
top:50%;
margin-top:-25%;
}
First of all, I am using some Jquery here for adding new elements:
So I removed min-height for content
Reset the ul margin-bottom to zero.
The new items are added via JS and are positioned absolutely:
ul.list-group {
margin-bottom: 0;
position: relative;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
The new items are listed one below the other giving the margin-top property:
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
Let me know your feedback on this. Thanks!
var newItems = 0;
$('.fixed_btn').click(function(event) {
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
newItems++;
});
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
-webkit-font-smoothing: antialiased;
font-family: Raleway;
}
.mainContainer {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
/*min-height: 350px;*/
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
.list-group-item {
height: 100px;
}
ul.list-group {
margin-bottom: 0;
position: relative;
}
.fixed_btn {
position: fixed;
top: 0;
left: 0;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="mainContainer">
<div class="content">
<ul class='list-group'>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
</ul>
</div>
</div>
<button class="btn fixed_btn">+ Add</button>
If you change your .mainContainer CSS so that the height is auto. Now the list will not move up, but only will move down as you wanted as the height is flexible depending on the content:
.mainContainer {
width: 100vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
Also, if you change the .content CSS so that the min-height is auto it seems to look nicer when there are fewer li elements:
.content {
min-height: auto;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
Updated (again) Fiddle, try to add more li elements
If your looking for the list to stay in position, but when more elements are added to have a scroll but still be fixed see this other Fiddle
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
My website container has a width of 95%. I'm trying to create a navigation which spans the full width of my container. It works fine until I add the 'position: fixed;' to the navigation, it then just ignores the container and spills outside the container.
below is my CSS code and a link to a picture.
#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}
.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
position: fixed;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}
Image of problem... http://i.imgur.com/pZEbe.png
Thanks for any help! It's much appreciated!
you are giving position:fixed which makes your navigation to come out of the parent div or element.
Add something like this in your navigation element:
.nav
{
width:95%; /*dont give width as 100% */
margin:0 auto; /* for center alignment purpose */
background-color: fuchsia;
height: 50px;
position: fixed;
}