1.I want fixed my row headers while horizontal scrolling.
2.I am using mat grid list to create my tables
.noScroll{ top: 0; position: sticky; }
position: static
Related
I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
I want a scrollbar for a label when the label more then the chart height. I mentioned in image where I want scrollbar. Actually sometime I have many labels therefore.
As described in the Documentation here:
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/#Making_legend_scrollable
You need to put the Legend into an external div thats inside a wrapper div.
The Div Structure:
<div id="legendwrapper">
<div id="legenddiv"></div>
</div>
Putting the legend in the external div:
var legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
Then you can make it scrollable by styling it like this:
#legenddiv {
width: 150px;
}
#legendwrapper {
max-width: 120px;
overflow-x: none;
overflow-y: auto;
}
A simple way to do this with AMCharts 4
chart.legend = new am4charts.Legend();
chart.legend.position = "right"; // Positionning your legend to the right of the chart
chart.legend.scrollable = true: // Make it scrollable
See a full example as below :
https://codepen.io/team/amcharts/pen/eYmLvoR
how to make vertical column headers on automatic column generation in tabulator js library?
i did this, and it works just fine:
//define data
var tabledata = {!!$one!!}
//define table
var table = new Tabulator("#table-1", {
data:tabledata,
autoColumns:true,
layout:"fitColumns",
});
but, when i add "headerVertical:true" it doesn't make any change:
//define data
var tabledata = {!!$one!!}
//define table
var table = new Tabulator("#table-1", {
data:tabledata,
autoColumns:true,
headerVertical:true,
layout:"fitColumns",
});
can anyone help me with making vertical column headers while columns are generating automatically?
headerVertical only works if you define columns as per documentation, how ever you can use simple css to achieve that
https://jsfiddle.net/dota2pro/t0gw9jbp/5/
to rotate 180 degrees use CSS rotate
.tabulator-col-title {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: mixed;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 20px;
/* if you use rotate change this to paddig-bottom*/
transform: rotate(180deg);
/* incase of rotation*/
}
I have a xychart with labels on the y axis. Every second label is being hidden:
Google suggests that I can set:
valueAxis.autoGridCount = false;
and:
valueAxis.gridCount
to the number of grids required by the data.
...but it doesn't have any effect, autoGridCount seems to be missing in the V4 documentation and there is no mention of it being removed.
How can I programmatically set gridcount?
EDIT: JSFiddle here
As you already figured out you can use axis.renderer.minGridDistance to show all labels:
categoryAxis.renderer.minGridDistance = 0;
To adjust the row height you can use series.columns.template.height to adjust the height of each element. I would suggest to set it to 100% and set a small border to the items:
series.columns.template.stroke = am4core.color('#fff');
series.columns.template.strokeWidth = 1;
series.columns.template.strokeOpacity = 1;
series.columns.template.height = am4core.percent(100);
To adjust the row height I would recommend increasing the chart height in general, because amcharts is trying to display all data in the area you provide. So increasing the height of the chart will cause all rows to have equal height and fill the provided area.
If you have varying data and don't know the number of rows, you can set the height of the chart dynamically according to the length of your data array and use an html scrollbar:
JavaScript:
document.getElementById('chart').style.height = `${chart.data.length * 50}px`;
HTML:
<div class="container">
<div id="chartdiv"></div>
</div>
CSS:
.container {
max-height: 300px;
overflow-y: auto;
}
#chartdiv {
min-height: 200px;
}
Here I created a code pen to show my suggestion.
Long story short..I need my navbar to float on top of an image background (don't want to make the image into a background image). I have managed to place the navbar on the image but its in the left corner. I need it in the right corner! Please help.
http://vetamera.nu/DK/index.html
Just add right: 0; to your .top-nav class.
.top-nav {
position: absolute;
top: 5px;
right: 0;
width: 750px;
}