I'm using gridstylesheets.org to mess with Constraint CSS. My html is this:
<div class="box side-by-side">
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
</div>
I would like each .space to be the height of the .box and to have evenly sized widths. In this case, the .box width divided by 3.
So far I have this:
.side-by-side .space {
left: >= ::parent[left];
top: >= ::parent[top];
width: == 200;
height: == 100;
}
.side-by-side {
#h .space in([.side-by-side]);
}
It floats the .spaces inside the parent but I'm not sure how to set the width. I would like to do something like this:
width: == ::parent[width] / ::parent[num-children];
I believe this will work:
(.space)[width] == ((.box)[width]) / 3;
Related
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).
I can't find a good way to size the grid to fit all rows perfectly.
documentation only points to sizing by % or px.
Since I want it to size based on rows, I came up with the following function. Seem like im re-inventing the wheel, so maybe there is a better way?
getHeight(type:EntityType) {
var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
? this.Apis[type].api.rowModel.rowsToDisplay.length
: -1;
return c > 0
? (40+(c*21))+'px' // not perfect but close formula for grid height
: '86%';
}
there has to be a less messy way..
I came across this solution:
https://github.com/ag-grid/ag-grid/issues/801
There are 2 answers to this problem.
1) If you are using anything below v10.1.0, then you can use the following CSS to achieve the problem:
.ag-scrolls {
height: auto !important;
}
.ag-body {
position: relative !important;
top: auto !important;
height: auto !important;
}
.ag-header {
position: relative !important;
}
.ag-floating-top {
position: relative !important;
top: auto !important;
}
.ag-floating-bottom {
position: relative !important;
top: auto !important;
}
.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
height: auto !important;
}
2) Anything above v10.1.0, there is now a property called 'domLayout'.
https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight
If the following is the markup
<ag-grid-angular
#agGrid
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
[domLayout]="domLayout"
[animateRows]="true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Note that [domLayout]="domLayout"
set it as this.domLayout = "autoHeight"; and you're done..
Ref:
https://www.ag-grid.com/javascript-grid-width-and-height/
https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU
Hope it helps.
You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')
reference Grid Auto Height
Add the following code on onGridReady function for auto width and auto height
onGridReady = params => {
// Following line to make the currently visible columns fit the screen
params.api.sizeColumnsToFit();
// Following line dymanic set height to row on content
params.api.resetRowHeights();
};
reference
Auto Height
Auto width
determineHeight() {
setTimeout(() => {
console.log(this.gridApi.getDisplayedRowCount());
if (this.gridApi.getDisplayedRowCount() < 20) {
this.gridApi.setDomLayout("autoHeight");
}
else {
this.gridApi.setDomLayout("normal");
document.getElementById('myGrid').style.height = "600px";
}
}, 500);
}
You can use ag-grid feature AutoHeight = true in the column Configuration. or if you want to calculate the height dynamically you should use getRowHeight() callback and create DOM elements like div and span, and add your text in it, then the div will give the OffsetHeight for it then you wont see any cropping of data/rows.
Hope this helps.
I have some grids, where i can choose the column width via flexform (33.3% - 33.3% - 33.3% or 25% - 50% - 25%, …)
I get the max-width of the columns by using CASE with the flexform-field value and the max-width of the page:
…
3 < lib.gridelements.defaultGridSetup
3 {
columns {
1 < .default
1.renderObj = COA
1.renderObj {
10 = LOAD_REGISTER
10.colMaxWidth.cObject = CASE
10.colMaxWidth.cObject {
key.data = field:parentgrid_flexform_style
default = TEXT
default.value =
col-1-2-1 = TEXT
col-1-2-1.value = {$maxContentWidth} / 4
col-1-2-1.prioriCalc = 1
col-4-3-3 = TEXT
col-4-3-3.value = {$maxContentWidth} / 10 * 4
col-4-3-3.prioriCalc = 1
col-1-1-1 = TEXT
col-1-1-1.value = {$maxContentWidth} / 3
col-1-1-1.prioriCalc = 1
}
20.textmedia.dataProcessing.20.maxGalleryWidth.stdWrap.data = register:colMaxWidth
30 = RESTORE_REGISTER
}
2 < .1
2 {
renderObj.10.colMaxWidth.cObject {
col-1-2-1.value = {$maxContentWidth} / 2
col-4-3-3.value = {$maxContentWidth} / 10 * 3
}
}
3 < .1
3 {
renderObj.10.colMaxWidth.cObject {
col-4-3-3.value = {$maxContentWidth} / 10 * 3
}
}
}
...
}
}
This will work fine. But I don’t know what to do, if using nested grids? Then I have to get the flexform-values of the parent gridelement.
Or what is your solution to calculate the max—image-width for grid-columns?
be careful with the calculated size. especially if you use responsive layouts. in responsive layouts columns could be wider on a smaller screen as columns may appaer beneath each other than side by side.
in general: you don't have an easy way to calculate the column width of stacked gridelements. you could do very complicated TS configuration, or you might use an userfunc to solve the computation in PHP.
Did you try to use gridelements together with fluidtemplates?
In the meantime I use this in all my defined grid-elements.
Don't do this on the server side, because the server will not get noticed, when a client changes its browser dimensions. The solution to your problem can easily be fixed by using some CSS. Lets assume you do not render the width directly, but use classes for a grid-system like bootstrap and your rendered gridelement HTML structure looks like this:
<div class="row">
<div class="columns column-2"></div>
<div class="columns column-8"><img src="someimage.jpg" width="800" height="400" /></div>
<div class="columns column-2"></div>
</div>
Your column CSS would probably look like this:
.row{
width: 100%;
}
.row:after{
content: '';
clear: both;
height: 0px;
visibility: hidden;
}
.columns{
float: left;
}
.column-2{
width: 33%;
}
.column-8{
width: 66%;
}
Now you want the images inside the columns to resize with the columns themselfes. A simple max-width: 100%; should do that like so:
.columns img{
max-width: 100%;
}
Since you are using registers anyway, you can include the already calculated register to calculate the amount on deeper levels of the nested structure.
Registers are working like a stack, so with each LOAD_REGISTER you will add a new value to the register stack of colMaxWidth, with each RESTORE_REGISTER you will remove that value in favor of the former value in the stack.
While this is not recommendable performancewise, you can still calculate nested amounts by including the register into the calculation as long as the result gets cached.
When you are on highly dynamic pages with more ore less uncacheable results, you should go for another solution though.
Why don't you use the image editor in TYPO3 V7 Media-Tab?
Screenshot of the image-editor — sorry, but in German
I am using mapbox-gl-js to display a map inside of a responsive container.
Regardless of the size of the responsive container, I want the map to maintain the same resolution such that resizing the window does not affect the bounds or zoom level of the map, it simply scales the map as if it were a static image.
I achieve this by dynamically calculating the scale factor and applying it to the container via CSS transform:
#map {
width: 100%;
height: 100%;
}
#map-scaler {
width: 1280px;
height: 1280px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: 0 0;
}
#map-container {
background-color: #fff;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
<div id="map-container">
<div id="map-scaler">
<div id="map"></div>
</div>
</div>
// Get size of map container for display
var mapContainer = $("#map-container");
var mcWidth = mapContainer.width();
var mcHeight = mapContainer.height();
// Get size of scaler container
var scaleContainer = $("#map-scaler");
var sWidth = scaleContainer.width();
var sHeight = scaleContainer.height();
var scaleWidth = mcWidth / sWidth;
var scaleHeight = mcHeight / sHeight;
$("#map-scaler").css("transform", "scale(" + scaleWidth + ", " + scaleHeight + ")");
This achieves the desired results visually. For example, I can have a 1280x1280 map displayed inside of a 500x500 container.
The problem is that all the mouse events are now "off". For example, if you attempt a map click or a scroll zoom, the map applies your mouse event to the wrong area of the map.
How can I compensate for my CSS transform so that mouse events accurately reflect where the user clicked?
Can you try the resize method? As mentionned in the doc, the method looks at your div width&height and resize your map. Event should be updated too.
https://www.mapbox.com/mapbox-gl-js/api/#Map#resize
I am trying to implement the app that have 4 pages in 4 table. It supposed to be support swipe gesture, and each page contains dynamic data and make the pages have different height.
I tried to use responsive-slider-div-span.source example and integrate the 4 table into the slides.
I would like to set the width and height for the slides dynamically while the document ready, However, The slide will not show if the width and height is not pre set in the the slide div.
May I know any suggestion?
Typically, the size of jssor slider is defined in html code, and you can alter the size grammatically.
Given a slider at size 600x300, you can use javascript to change size before initialization of jssor slider.
<script>
jQuery(document).ready(function ($) {
var options = {};
//retrieve height of the slider, assuming the height should be 200px;
$("#slider1_container").height("200px");
$("#slider1_slides").height("200px");
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//According to your comment, please add following code
//Handle $EVT_PARK event BEGIN
function OnSliderPark(slideIndex, fromIndex) {
if (slideIndex == 0 || slideIndex == jssor_slider1.$SlidesCount() - 1) {
//do something scroll page to top
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSliderPark);
//Handle $EVT_PARK event END
});
</script>
<div id="slider1_container" style="... width: 600px; height: 300px; ...">
<div u="slides" id="slider1_slides" style="... width: 600px; height: 300px; ...">
...
</div>
</div>