I am trying to get an ag-Grid to fill the vertical space in a panel on a page. If I put the style on the .HTML page like this:
<style>
.right_panel > div {
display: flex;
flex: 1;
height: 95%;
flex-direction: column;
}
</style>
... or include it in the Javascript:
$(".right_panel > div").css("display", "flex");
$(".right_panel > div").css("flex-direction", "column");
$(".right_panel > div").css("height", "95%");
$(".right_panel > div").css("flex", "1");
... the styles will correctly show up in the Chrome CSS Debugger:
... but my ag-Grid is crushed down to zero height.
{image of a page with a grid that only has a navbar under which there's a lot of white space}
Disabling them and retyping them into the CSS Debugger verbatim:
... and the grid works fine
{image of a page with a grid that properly fills the page}
Is there something obvious (obviously) that I'm missing? I've read questions like this one to get the grid to fill the available vertical space. Why does this seemingly correct css only work when manually entered in the CSS debugger, and how do I fix it in my code?
Heavily edited HTML for the page:
<html>
<head>...</head>
<body>
<div id="main-view" ui-view="" class="ng-scope">
<div class="vbox ng-scope">
<div class="vbox-grow page-sidebar ng-scope splitter_panel" split-v="splitterCtrl">
<main class="hbox-grow right_panel" style="width: 1233px;">
<div ui-view="" class="ng-scope"><div class="task page ng-scope"> <!-- THIS is the line with the CSS I'm editing -->
<div class="task page ng-scope">
<article class="page-content">
<ui-view class="ng-scope">
<article class="page-content ng-scope" style="height: 100%; background-color: aliceblue; display: flex; flex-direction: column; flex: 1;">
<div id="gridContainer" style="height: 100%; background-color: yellow; flex-direction: column; flex: 1 1 0%; display: flex;">
<!-- THIS is the div that gets populated with the ag-grid -->
<div id="gridContent" style="width: 100%; background-color: hotpink; flex: 1; display: flex; flex-direction: column;" class="ag-fresh">
Related
So what I've got is a landing page that should show a.) a header b.) a large picture that fills the screen on desktop and c.) a navbar. The navbar should scroll along the page once it's reached the top of the page.
Now, the only way I would know to ensure that all three of those elements fit perfectly into the viewport on desktop is with max-height: 100vh in a parent element. However, I'd like to make the navbar scroll along once it's at the top of the screen. This isn't possible when the navbar is in its own container, because it'll stop scrolling along once it's hit the bottom of its container.
Does anyone know of a fix? Below is a sample of the structure I'm trying to use right now:
<div class="container-top">
<header>
<!--- ...header content... -->
</header>
<div>
<img src="1080p_image.png">
</div>
<nav class="sticky-top">
<!-- ...navbar content... -->
</nav>
</div>
<div class="other-content">
<!-- ...other content... -->
</div>
.container-top{
max-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
img{
width: 100vw;
}
header{
background-color: darkgray;
height: 5rem;
z-index: 1;
}
nav{
background-color: darkgray;
height: 5rem;
z-index: 1;
}
.sticky-top{
position: sticky;
top: 0;
}
.other-content{
height: 100rem;
}
Have you tried moving your nav into its own div below div.container-top?
<div class="container-top">
<header>
<!-- ...header content -->
</header>
<div>
<img/>
</div>
</div>
<div>
<nav class="sticky-top">
<!-- ..navbar content... -->
</nav>
</div>
<div class="other-content">
<!-- ...other content... -->
</div>
And if you want these elements to take up 100vh:
.container-top {
max-height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav {
max-height: 25vh;
}
Lemme know how that works for ya.
I am using Materializecss to create React app. I have already applied flex inside my app class. And now I want to apply flex inside main tag where buttons get fixed at bottom of main tag & above the footer.
I have tried {margin-top: auto;} , justify-content: flex-end which didn't help. The buttons always print after content class. I can set the height of the content class, but small devices render view badly and it's not fixing my problem.
JSX code:
<div className="app">
<header> <header>
<main>
<div className="box">
<div className="content"> Long text less than 100 words <div>
<div className="buttons"> <button> Button-1 </button> <button> Button-2 </button>
<div>
<main>
<footer><footer>
<div>
My css
app {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
I want to stick my button above the footer. My content class has 100 words then the button should stick above the footer not rendered after the content class.
I would appreciate the help.
You haven't applied display:flex etc to the main element. If you do that the margin-top:auto will work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.app {
display: flex;
min-height: 100vh;
flex-direction: column;
background: ;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.buttons {
margin-top: auto;
}
<div class="app">
<header>header </header>
<main>
<div class="box">box</div>
<div class="content"> Long text less than 100 words </div>
<div class="buttons">
<button> Button-1 </button>
<button> Button-2 </button>
</div>
</main>
<footer>footer</footer>
</div>
I need to build an app that has a table. I tried using html <table> tags to build a table. Even though it shows the table as i require when i run using npm run serve when i build an apk and run it on my android device the output is messed up.
Does anyone know how to build a table in weex.
And does anyone have any good documentations or tutorials regarding weex.
thanks
It looks like HTML but Weex does not render actual HTML on native. The <div>s you write are Weex components that get translated to the target platform.
So while running on a browser may render tables, until Weex has a default <table> component, it won't render on native as you expect.
You can create your own component and lay it out using flexbox.
As others have commented, Weex doesn't use HTML but rather has a XML syntax which looks alike. So you need to implement something akin to a using only <div>s. I had to do exacly that, so I might as well post it here.
<template>
<div class="table">
<div class="row heading">
<div class="cell headingColumn">Table</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 2</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</template>
<style scoped>
.table {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 60px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
/*width: 100px;*/
padding: 20px;
}
.heading {
background-color: grey;
font-weight: bold;
}
.headingColumn {
width: 120px;
}
</style>
Copy and paste it into dotwe.org and it will work and be rendered as expected in Android & the web.
As a side note, if you specify fixed widths (or min-widths) for the columns, styling will be much easier. That's why I've specified a .headingColumn class and there's a commented width:100px value inside .cell.
BTW, you might need to edit the and add a tag inside them with the text content you want.
I am trying to apply flex to bootstrap 3 container and found strange behaviour of child elements Here is the code.
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
(see example on jsfiddle JSFiddle)
I cannot find out what's the problem with the space-between.
Thank you for the help.
Combining Bootstrap 3 with Flexbox is not recommended.
That said, Bootstraps container class also uses both the pseudo elements, hence they will participate in the flex container being flex items, and here one can see them when giving them a small width/height and background color.
And as you can see, the justify-content: space-between; work as it is supposed to.
.container {
display: flex;
justify-content: space-between;
}
.container::before, .container::after {
width: 30px;
height: 30px;
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
One workaround would be a wrapper
.container .flex {
display: flex;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="flex">
<div class="child">One</div>
<div class="child">Two</div>
</div>
</div>
I think the issue is that you're using a classname from bootstrap .container you're attempting to change the style. Just use a id instead of the classname container.
#main {
display: flex;
justify-content: space-between;
}
<div id="main">
<div class="child">One</div>
<div class="child">Two</div>
</div>
I am using Bootstrap 3 in my project and have a row with two panels side by side. What I'd like to achieve is to make the right panel have same height as left one.
Having two columns of the same height is not the problem. As you can see in the code provided below, it's already done. The real problem is that:
Left panel should fit the content.
If right panel has content which exceeds left panel's height, a scrollbar should appear.
And now the question comes: I was wondering if there is any pure CSS solution with which I can achieve this? Note that left column's height can change so assigning fixed height to columns won't resolve the problem. I've already tried a few different solutions, but none worked.
Here is my current code:
Html
<div class="row flex-row">
<div class="col-xs-6">
<div class="panel panel-default flex-col">
<div class="panel-body">
Some<br><br>
content
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default flex-col">
<div class="panel-body">
Some<br><br><br>
longer<br><br><br>
content
</div>
</div>
</div>
</div>
CSS
.flex-row, .flex-row > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex: 0 auto;
-webkit-flex: 0 auto;
flex: 0 auto;
}
.flex-col {
display: flex;
display: -webkit-flex;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
-ms-flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
overflow-y: auto;
}
Fiddle:
https://jsfiddle.net/g1u8u98g/2/
I'd be grateful for any help.
Give separate class name to right panel like 'rgt'
and in CSS put :
.rgt{
height: 90px;
overflow-y: scroll;
}
Remove those styling you already done if not necessary
Give separate classes and give style as :
.lft{
height:100%;
}
.rgt{
height:100%;
overflow-y:scroll;
}
then add script as :
<script>
$('.rgt').css('height', $('.lft').height() + 'px');
</script>