i have problem with horizontal scrollable div in ngx-datatable. How to fill content with full width ? That green color must be fill the content.
Here is some code:
#media screen and (min-width: 769px) and (max-width: 1160px) {
.datatable-body {
display: flex;
flex-wrap: wrap;
overflow-x: scroll;
&-cell {
flex: 0 0 20%;
max-width: 20%;
width: auto !important;
min-width: 20% !important;
white-space: normal !important;
font-size: 12px;
&.is_hidden {
display: none;
}
}
}
.datatable-scroll,
.datatable-row-wrapper,
.datatable-body-row,
.datatable-header-inner {
width: 100% !important;
}
// All column will same width
.datatable-header {
&-cell {
flex: 0 0 20%;
max-width: 20%;
width: auto !important;
min-width: 20% !important;
font-size: 12px;
&.should_be_hidden {
display: none;
}
}
}
}
What did i do wrong any suggestion ?
Try adding width to <ngx-datatable></ngx-datatable> selector.
Related
I have a 3 column element on a page
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
And have the following css rules:
main {
display:flex;
flex-wrap:wrap;
margin-left: -20px;
}
main > * {
margin-left: 20px;
}
aside.left-sidebar {
max-width: 320px;
width: calc(25% - 20px);
}
.main-content {
width: calc(100% - 800px);
margin: 0 auto;
padding-top: 65px;
max-width: 1200px;
}
aside.right-sidebar {
max-width: 400px;
width: calc(25% - 20px);
}
This works fine on Chrome and Firefox but not on Microsoft Edge, anything am missing?
One thing I noticed on Edge upon checking its DevTools is that it will reverse the operation on the calc() function so instead of width: calc(25% - 20px); it'll convert it to calc(-20px + 50%)
unsure if that's the culprit tho the result is the same I think.
UPDATE: Forgot to include that there's a max-width set on columns and max-width:100% is called when screen size is #media screen and (max-width: 1440px).
Possible workaround that shouldn't be used
This only appears to be a problem with percentage widths, not viewport width units (vw). Here is a workaround that shouldn't be used:
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
max-width: 100%;
width: calc(25vw - 20px);
}
.main-content {
background: green;
max-width: 100%;
width: calc(50vw - 20px);
margin: 0 20px;
}
aside.right-sidebar {
background: blue;
max-width: 100%;
width: 25vw;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
What you should use
Since you're using flex, use flex:
First and third column are given flex: 1
Center column is given flex: 2
Place the left and right margin on the center column
The columns can be given individual max-widths
No widths are given
This gives you the same ratio, no need for calc.
Example
Note: I have removed the default margin on the body and given main 100vh so it has a height for this example.
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
flex: 1;
max-width: 320px;
}
.main-content {
background: green;
flex: 2;
max-width: 1200px;
margin: 0 40px;
}
aside.right-sidebar {
background: blue;
flex: 1;
max-width: 400px;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
The code has three divs that are ordered in the dom by div-00#
What I'd like to create using flexbox (for width >= 460px) is the following layout (please see images)
Added: 18-12-16 -
is anyone able to suggest how to do this using flexbox?
There is a second issue with the tab order but would appreciate sorting the layout first.
ON MOBILE (say < 460px) - within the .div-main:
All the divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.
ON DESKTOP (say >= 460px) - within the .div-main:
Because of varying heights I'm not using floats, as this happens on desktop
.
.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally the tab index should be 2 (therefore I've used flex to order this '2') but know that the order is read out by the order of the DOM.
.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally the tab index should be 1 (therefore I've used flex to order this '1')
.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally the tab index should be 3 (therefore I've used flex to order this '3')
The order (just in case you were wondering) is important.
* {
margin: 0;
padding: 0;
border: 0;
}
a:focus,
a:hover {
color: red;
}
.header,
.footer {
width: 100%;
max-width: 1220px;
margin: 0 auto;
background: #000;
}
.header {
height: 50px;
}
.footer {
height: 20px;
}
.div-main {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 0;
}
.div-main > div {
min-height: 50px;
box-sizing: border-box;
border: 1px solid #f00;
padding: 10px;
}
#media all and (min-width: 460px) {
.div-main {
display: flex;
flex-direction: column;
}
.div-desktop-left {
width: 80%;
margin-right: auto;
}
.div-desktop-right {
width: 20%;
margin-left: auto;
}
.div-001 {
/* example */
height: 70px;
order: 2;
}
.div-002 {
/* example (varying height) */
align-self: flex-start;
/* smaller than .div-001 */
height: 50px;
/* bigger than .div-001 */
/* height: 360px; */
order: 1;
}
.div-003 {
/* example */
height: 20px;
order: 3;
}
}
<header class="header"></header>
<div class="div-main">
<div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001">Desktop link 002</div>
<div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001">Desktop link 001</div>
<div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002">Desktop link 003</div>
</div>
<footer class="footer"></footer>
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
HTML
body {
margin: 0;
padding: 0;
}
main {
display: grid;
grid-template-columns: 3fr 1fr;
height: 300px;
}
.box {
border: 5px solid red;
padding: 50px;
}
.box.three {
grid-column: 2;
}
#media (max-width: 460px) {
main {
display: flex;
flex-flow: column;
}
.box {
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexer</title>
</head>
<body>
<main>
<div class="box one">one</div>
<div class="box two">two</div>
<div class="box three">three</div>
</main>
</body>
</html>
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
margin: 0;
padding: 0;
border: 0;
}
a:focus,
a:hover {
color: red;
}
.header,
.footer {
width: 100%;
max-width: 1220px;
margin: 0 auto;
background: #000;
}
.header {
height: 50px;
}
.footer {
height: 20px;
}
.div-main {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 0;
}
.div-main > div {
min-height: 50px;
box-sizing: border-box;
border: 1px solid #f00;
padding: 10px;
}
#media all and (min-width: 460px) {
.div-main {
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.div-desktop-left {
width: 80%;
margin-right: auto;
}
.div-desktop-right {
width: 20%;
margin-left: auto;
}
.div-001 {
/* example */
height: 70px;
order: 2;
}
.div-002 {
/* example */
align-self: flex-start;
height: 50px;
order: 1;
}
.div-003 {
/* example */
height: 20px;
order: 3;
}
}
<header class="header"></header>
<div class="div-main">
<div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001">Desktop link 002</div>
<div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001">Desktop link 001</div>
<div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002">Desktop link 003</div>
</div>
<footer class="footer"></footer>
I have a table that can grow, once it grows it can push the grid height to be larger than the background.
I want that the grid itself will have a scroll on top of the background.
I tried to use overflow but did not succeed.
you can see the problem here
here is the relevant code:
.wrapper {
background-repeat: no-repeat;
background-position: top center;
height: 1024px;
min-width: 1055px;
display: grid;
grid-template-columns: 0.1fr 2.8fr 0.1fr;
grid-gap: 10px;
grid-template-rows: 100px auto auto 100px;
font-family: 'roboto',sans-serif;
overflow:visible;
/*grid-auto-rows: minmax(100px, auto);*/
/*border: 1px solid;*/
}
.wrapper > div {
display: flex;
justify-content: center;
/* align-items: center; */
font-size: 16px;
font-weight: 400;
/* border: solid 1px; */
color: #39393ac7 /*#39393A*/;
}
.header {
grid-column: 2 ;
}
.herbTable {
grid-column: 2 ;
}
.chart {
grid-column: 2 ;
}
.footer {
grid-column: 1 / -1 ;
grid-row: 4;
}
#media screen and (max-width : 1439px) /*and (max-width : 1439px) */
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: cover;
/* background-size: 1024px; */
/* width: 1024px; */
}
}
#media screen and (min-width : 1440px)
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: 1440px auto;
/* height: 1024px; */
width: 1440px;
}
}
<template>
<div class="wrapper">
<appHeader class="header"></appHeader>
<loading :active.sync="isLoading" :can-cancel="false"></loading>
<appHerbsTable v-if="!isLoading" class="herbTable"></appHerbsTable>
<appChart v-if="!isLoading" class="chart">chart</appChart>
<div class="footer"></div>
</div>
</template>
.wrapper {
/* overflow: visible; */
overflow: auto; /* NEW */
}
As you have fixed column widths this should be pretty easy changing your css to:
.herbTable thead {
display: block; /*inline-block should also be ok*/
}
.herbTable tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
.. you will have to modify your td widths to make this look nice again
EDIT: (I hope I finally understand what you mean by grid)
html {
height: 100%;
}
body {
height: 100%;
box-sizing: border-box;
padding: 8px;
margin: 0;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.. hope this helps ..
I have a fab-menu that I want it to be on top of data table buttons see screenshot (relative position):
CSS:
.fab-menu {
position: relative;
display: inline-block;
white-space: nowrap;
padding: 0;
margin: 0;
list-style: none;
z-index: 999;
}
I have tried position absolute which worked but the fab-menu buttons are misplaced. See screenshot (absolute position):
CSS of data table scroll wrap:
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
PS : if i remove overflow-x: auto; the buttons will appear on top but the table scroll bar will not show up if i resize the page
under
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
add the following :
#media (max-width: 767px) {
.datatable-scroll-wrap .dropdown-menu {
position: absolute!important;
}
}
#media (min-width: 768px) {
.datatable-scroll-wrap {
overflow: visible;
}
}
I'm trying to make my own responsive layout using percentages. I managed to calculate the columns that I wanted to use but I can't work out how to put like a margin (gutter) in between columns. If you check the codepen code there is no spacing in between the contents.
Codepen
.container{
width: 90%;
max-width: 1140px;
margin: 0 auto;
/*background: #333;*/
}
.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
padding-right: 1em;
padding-left: 1em;
border-left-width:12px;
}
.row{
float: left;
clear: both;
width: 100%;
}
.container .columns.col-1 { width: 8.33333333333%; }
.container .columns.col-2 { width: 16.6666666667%; }
.container .columns.col-3 { width: 25%; }
.container .columns.col-4 { width: 33.3333333333%; }
.container .columns.col-5 { width: 41.6666666667%; }
.container .columns.col-6 { width: 50%; }
.container .columns.col-7 { width: 58.3333333333%; }
.container .columns.col-8 { width: 66.6666666667%; }
.container .columns.col-9 { width: 75%; }
.container .columns.col-10{ width: 83.3333333333%; }
.container .columns.col-11{ width: 91.6666666667%; }
.container .columns.col-12{ width: 100%; }
I would personally shy away from Calc as it's still not fully supported but up to you — http://caniuse.com/#feat=calc
I would recommend wrapping all of your content in another set of elements that way you can use padding for spacing and margin for alignment. Check out the demo.
<div class="columns col-6"><div>6</div></div>
DEMO
Instead of giving padding give margin
.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}
Use calc() method to calculate margin from width.For example for .col-3 the CSS would be
.container .columns.col-3 {
width: calc(25% - 5px);
margin-right:5px;
}
make sure you use calc() in right way like this
calc([first value][space][operator][space][second value])
If you see your columns width, You have divided 100% of the viewport width equally.
For example:
.container .columns.col-6 {
width: 50%;
}
So in that case, you won't have any space between two blocks.
So while mentioning the width for the columns, you need to consider margin as well.
so you can use either of the following two approaches:
.container .columns.col-6 {
width: calc(50% - 10px); // 10px represents the margin / space
margin-right:10px;
}
or
.container .columns.col-6 {
width: 46%;
margin-right: 1%;
}
The first approach is better.