Electron Layout With Bootstrap 4 Grid Problem
0
I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
html css bootstrap-4 electron
asked Nov 11 at 9:45
biladina
638
add a comment |
0
I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
html css bootstrap-4 electron
asked Nov 11 at 9:45
biladina
638
add a comment |
0
0
0
I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
html css bootstrap-4 electron
asked Nov 11 at 9:45
biladina
638
I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
html css bootstrap-4 electron
html css bootstrap-4 electron
asked Nov 11 at 9:45
biladina
638
asked Nov 11 at 9:45
biladina
638
edited Nov 11 at 15:16
asked Nov 11 at 9:45
biladina
638
asked Nov 11 at 9:45
biladina
638
asked Nov 11 at 9:45
biladina
638
638
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>answered Nov 11 at 16:10
Martin Homola
1777
wow, its working, but thedivcan't scrollable, it just show data up to end ofdivheight..
– biladina
Nov 11 at 17:00
So add to<div>which isn't scrollableoverflow: auto;
– Martin Homola
Nov 11 at 17:36
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247487%2felectron-layout-with-bootstrap-4-grid-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>answered Nov 11 at 16:10
Martin Homola
1777
wow, its working, but thedivcan't scrollable, it just show data up to end ofdivheight..
– biladina
Nov 11 at 17:00
So add to<div>which isn't scrollableoverflow: auto;
– Martin Homola
Nov 11 at 17:36
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
add a comment |
1
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>answered Nov 11 at 16:10
Martin Homola
1777
wow, its working, but thedivcan't scrollable, it just show data up to end ofdivheight..
– biladina
Nov 11 at 17:00
So add to<div>which isn't scrollableoverflow: auto;
– Martin Homola
Nov 11 at 17:36
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
add a comment |
1
1
1
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>answered Nov 11 at 16:10
Martin Homola
1777
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div><div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div><div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>answered Nov 11 at 16:10
Martin Homola
1777
answered Nov 11 at 16:10
Martin Homola
1777
answered Nov 11 at 16:10
Martin Homola
1777
answered Nov 11 at 16:10
Martin Homola
1777
1777
wow, its working, but thedivcan't scrollable, it just show data up to end ofdivheight..
– biladina
Nov 11 at 17:00
So add to<div>which isn't scrollableoverflow: auto;
– Martin Homola
Nov 11 at 17:36
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
add a comment |
wow, its working, but thedivcan't scrollable, it just show data up to end ofdivheight..
– biladina
Nov 11 at 17:00
So add to<div>which isn't scrollableoverflow: auto;
– Martin Homola
Nov 11 at 17:36
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
wow, its working, but the
div can't scrollable, it just show data up to end of div height..– biladina
Nov 11 at 17:00
wow, its working, but the
div can't scrollable, it just show data up to end of div height..– biladina
Nov 11 at 17:00
So add to
<div> which isn't scrollable overflow: auto;– Martin Homola
Nov 11 at 17:36
So add to
<div> which isn't scrollable overflow: auto;– Martin Homola
Nov 11 at 17:36
1
1
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
thanks a lot, its fully working right now..
– biladina
Nov 11 at 18:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247487%2felectron-layout-with-bootstrap-4-grid-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
