ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: ohbayashi on April 20, 2017, 01:46:01 pm

Title: Height: "100%" does not work.
Post by: ohbayashi on April 20, 2017, 01:46:01 pm
I checked css etc. of the upper tag with google chrome Devloper tools etc, but the influence definition was not found.

Is there anything else to do to make it 100% height?

Code: [Select]
<body>
  <div id="app">
    <div id="container">
        <div id="contents">
            <div id="gridMain" ></div>
        </div><!-- #contents -->
    </div><!-- #container -->
  </div>
</body>

Code: [Select]
let gd = {
    height: "100%-10",   // It does not become effective.
    // height: "flex",   // Now we are applying this.
    hwrap: false,
    wrap: false,
    collapsible: false,
    resizable: true,
    virtualX: true,
    virtualY: false,
    resizable: true,
    fillHandle: "",
    :
}
let grid = pq.grid("#gridMain", gd);
Title: Re: Height: "100%" does not work.
Post by: paramvir on April 20, 2017, 04:08:18 pm
% height is percent of the height of the immediate parent i.e., contents in your case. So what height have you set for contents?
Title: Re: Height: "100%" does not work.
Post by: ohbayashi on April 21, 2017, 11:35:37 am
All under the body tag is 100%.

Code: [Select]
#container {
    /* margin: 10px 30px 0 30px; */
    margin: 8px 16px 4px 16px;
    height: 100%;
    min-height: 100%;
    /* overflow: scroll; */
}

#contents {
    /* box-sizing: border-box; */
    margin: 8px;
    /* height: auto; */
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: auto;
    clear: both;
}
Title: Re: Height: "100%" does not work.
Post by: paramvir on April 21, 2017, 05:20:53 pm
You also need to set height of html,body ( and app too )

Code: [Select]
html,body{
  margin:0;
  height:100%;
}

http://jsfiddle.net/xms01eon/
Title: Re: Height: "100%" does not work.
Post by: ohbayashi on April 22, 2017, 11:34:04 am
Thank you. It was helpful.

It was a skill of "html" ...

Below the sample of what I wanted to do this time.


html.
Code: [Select]
<div id="app">
<div id="navbar">
  <a class="navbar-brand" href="http://aaa.com/home">title.</a>
</div>
<div id="container">
<div id="contents">
  <div id="grid_json" style="margin:auto;"></div>
</div>
</div>
</div>
</div>

css.
Code: [Select]
</style><!-- Ugly Hack due to jsFiddle issue --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><script src="http://paramquery.com/pro2/Content/js3.3.1/pqgrid.min.js"></script><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="http://paramquery.com/pro2/Content/css3.3.1/pqgrid.min.css" type="text/css" rel="stylesheet"><link href="http://paramquery.com/pro2/Content/css3.3.1/pqgrid.ui.min.css" type="text/css" rel="stylesheet"><link href="http://paramquery.com/pro2/Content/css3.3.1/themes/office/pqgrid.css" type="text/css" rel="stylesheet">
<style>
html,body{
  margin:0;
  height:100%;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#navbar {
  margin-bottom: 6px;
  background-image: url('abc.png');
  background-repeat: no-repeat;
  background-position: 0 5px;
  background-size: 150px auto;
  height: 50px;
  padding-left: 170px!important;
  background: #f2f5e9!important;
  border: 1px solid #ccc;
}
#container {
  height: 100%;
  overflow: auto;
  position: relative;
}
#contents {
  height: 100%;
}
</style>