Is it possible to comply all these requirements ?
the height of the grid shall be fixed whatever the number of records;
the right space after the last columns shall be never displayed;
if the number of records is greater than the height of the grid then a vertical scrollbar shall be displayed;
an horizontal scrollbar shall be never displayed;
when possible, the height could be adapted in order to not have an "half" displayed record in the bottom of the grid.
with scroll = true
... and whatever the number of grids on screen OUF !
PS: Oleg has surely the answer ...
Add this to your stylesheet:
.ui-jqgrid .ui-jqgrid-bdiv thead,div,tbody{
position: relative;
margin: 0em;
padding:0;
/*overflow: auto;*/
overflow-x:hidden;
overflow-y:auto;
text-align:left;
}
As parameters to jqgrid add:
scrollOffset: 0,
Related
I have problem with fullpage js, situation is:
in full page content there is element with styling for example:
.element{
left: auto;
right: 5vw;
width: 50%;
bottom: 15vh;
transform: none;
}
When page is load (with this section anchor or no ) div looks like for about 100px more to bottom as it should be. When this first section is scrolled down and then back to top position of this element looks as it should be.
I know that element is in same position as in code, but don't know why looks more to bottom before first scroll.
I was also try with min-height and padding:15vh 0 but usucessfuly:/
Thanks for help
solution was to adding height 100vh to parent element of this absolute element. In my case slick slider.
It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?
#ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.
Then you can use conventional overflow-y: auto on the row chart div.
Here is a related issue on dc.js.
The dc.axis addon mentioned by #Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.
To solve this, add one div after the row chart div, this div will contain a copy of the axis.
<div id='row-axis'></div>
Then initialize this axis in the javascript
dc.axisChart('#row-axis')
.margins({ left: 10, top: 0, right: 10, bottom: 10 })
.height( 50 )
.width( 300 )
.dimension( dimension )
.group( group )
.elasticX( true );
Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.
.width(300)
.margins({ left: 10, top: 0, right: 10, bottom: 0 })
Then , in the css
div.dc-chart {
float: none;
}
Dont forget to include overflow-y: auto for the row style. Then you get:
This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.
But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:
.fixedBarHeight(X)
.height(X*N + gap*(N+1))
Which will give you:
Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.
Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1
Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.
I try to change the row height of the table with css
http://jsfiddle.net/aep5bo3r/1/
I added this to change the row height.
#basic_example td
{
height: 15px!important;
line-height: 15px!important;
font-size: 10px;
}
The rows height is smaller, but now the scroll is .. jumpy?
With the default row height the cells are added nicely when scrolling, but if the rows are smaller, it won't add new rows until you scrolled past a certain portion.
I guess the javascript part doesn't like the new change.
If you can help me solve this, having smaller row height with an working scroll, it would be nice.
Thanks;
If I understand well so your problem will be solved if we add renderAllRows: true to your settings option when creating Handsontable object.
var hot = new Handsontable($('#tableContainerId')[0], {
...
renderAllRows: true,
...
});
I have an outer div with a variable height (and max-height) that's set with a specific pixel amount by JavaScript, containing two divs within.
The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.
The 2nd div is intended to hold a fixed amount of content, and has a specific height set.
Right now, the max-height isn't working. The 1st div keeps growing, even with overflow: auto; set, and pushes the 2nd div below it outside the bounds of the outer div. How can I make it so that when the 1st div gets too large for the outer div to contain both it and the fixed-height 2nd div, the 1st div will start to scroll?
Example page: http://thevastdesign.com/scrollTest.html
Thanks for any help. I'd appreciate a CSS solution the most, even if it requires some hacks. It only has to work in Firefox 3+, IE8, and IE7.
Ideas?
You cant really do that without JS. Your max-height on the outer-div isnt going to control the height of one of your inner divs to invoke its scrolling. That inner div is always going to be the height you set (pixels, auto, etc..). You can either make the entire outer div scroll as needed by using overflow: auto or you can set a max height on the first inner div and set the overflow.
Given your setup, I would do the following (class names are implied by your question, not taken from the linked source):
div.outer {
position: relative;
max-height: $length(y);
overflow: hidden;
}
div.innerFixed {
position: absolute;
bottom: 0;
height: $length(y);
overflow: hidden; /* just in case, to keep things from
blowing out into all manner of crazy */
}
div.innerFlex {
max-height: $length(y);
overflow: auto;
}
These rules don't address box properties, which will have an impact on the height values that you apply. The combined height values (with box values included) of .innerFixed and .innerFlex should equal the height value of the container.
If you want to get all Zen and flip the vertical composition, you do that by swapping bottom for top on .innerFixed and assigning margin-top or padding-top to .innerFlex.
Something else I noticed is that you've got
div.outer { float: left; }
...But given what you need from that element (and to set the right content priority) I would instead suggest that you put your big column first in the source order and apply
div.mainContent {
float: right;
width: $length(x);
}
div.outer { /* i.e., the column that started the discussion */
margin-right: length(x);
}
with the understanding that the margin-right of the latter is somewhat greater than the width of the former (greater to account for the gutter between the two elements). Try it, you'll like it.
I have a problem with IE.
I have a fixed div like this:
#fixed {
position: fixed;
top: 0px;
left: 0px;
z-index: 9998;
width: 100%;
height: 40px;
}
Inside this div I want to place another div that has a height that is higher than its holder (higher than 40px). So I put a relative or an absolute div inside it and it works splendid in all browsers except IE, at least IE8.
But in IE8 the child div gets cut because of the height of 40px specified for it's holder.
Is there any workaround to this problem? I'm starting to get gray hairs..
Quick reply: have you tried setting the clip property of the contained div to it's own size?
Another workaround would be (if, say you have a container div with left/right margins auto and position: relative) to have the second div outside the fixed div in your HTML, then position it fixed within the container div instead - since it's also fixed, you can then set top/bottom and left/right positions to suit.