I am trying to append content inside a Gridster widget but with no luck for two days already. I tried with:
.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
but the sizes x and y only accept numbers - its default re-sizing mechanism and they are not pixels. They are some sort of steps. If I increment with +1 the size_y the widget is re-sized more than needed and again with its own mechanism.
I was also looking for a way to reduce this step. No luck.
I also tried to change the widget height, min-height, etc. It was not re-sizing.
Do you have any suggestions, ideas?
Just in case anyone comes to this question later.
The x and y numbers are the number of columns and rows a widget takes up. You define the number of rows and columns, as well as the width and height of each when you create the gridster grid.
Related
I have a custom range slider in react that renders the toggle(range) value dynamically values from API. Further, the value or amount the slider covers needs to be divided into sub-sections, whose widths need to be the sum of the value or amount the slider covers.
For example, If the slider covers 220 value/range, it should be divided into 2 sections (say) with a width of sub-sections equivalent to 120 & 100 respectively. The divided values are received from the API itself. It will look something like this:
I was able to handle the maximum functionality of this, except to divide the slider into sections properly & set the dynamic width of the sections.
I have included the working snippet:
https://codesandbox.io/s/nifty-matsumoto-5nnrv
Some of the CSS might seem a bit messed up due to browser compatibility-issue, but it pretty works to replicate my problem.
here is a working solution. Please make sure to refactor, as it is quick and dirty.
I have added a calcSlideWidth function that determindes the correct width of a slide.
I pass the calculated pecentage value to the span that contains the sliderPopup
I have extracted percent to the State
https://codesandbox.io/s/competent-http-br6s6?file=/src/SegmentedSlider.js
Does such a script exist?
Masonry and flexbox do not make columns match end to end, like Flickr does; and obviously so, because neither resize height.
I want to be able to take elements of any (relative) width, and have a script resize their height like Flickr .
Basically, take a container with 6 elements. Imagine they exist as 2 columns with 3 rows.
Now, if element #2 is a few pixels more narrow than the other 5, the top column will end a few pixels before the bottom column does. I don't want this to happen.
That's it. I have a lot of data and I can't know what height should i use. Is there anyway to make height flexible? I've heard about RowHeightGetter, but i don't know how to use it. Can u give me some example? Thank you
Set your rowHeight as normal, but also set a rowHeightGetter. Below is an example of setting row height as a function of the length of some array in our row. Another example would be using the length of some string to set row height.
<ResponsiveFixedDataTable
headerHeight={50}
rowsCount={data.length}
rowHeight={66}
rowHeightGetter={(rowIndex) => Math.max(66, data[rowIndex][2].length * 22)}
>
Use offsetHeight of an element wrapping you cell content, instead of char count to be more precise.
It looks like angular ui-grid, in some cases, wrongly calculating or canvasHeight or top margin of first row from renderedRows - result is big blank space in the ending, when scrolling to bottom of the list.
It can be "fixed" in GridRenderContainer.prototype.adjustRows function, by increasing self.grid.options.excessRows number, or calling self.updateViewableRowRange with lesser range start position, but this leads to rendering of hidden rows, that, kinda, killing sense of ui-grid using.
Also, this problem can be "fixed", by adjusting ui-grid canvas element height by jquery.
Is there correct way to fix this problem?
We're using the new css3 multi-column layout properties to get our text into newspaper columns. Each column gets a fixed width, and the column-count defaults to "auto", which means that the browser decides how many columns there are.
How do we get the actual number of columns as an integer in Javascript?
If we query the css "column-count" (or -moz-column-count) we get either "auto" or a blank as a result.
The secret is to put a small marker at the end of the content. You can programmatically add an empty span:
<span id="mymarker"></span>
then grab the span using a jquery $("#mymarker") and get the "left" property. Divide that number by the width of the columns (adjusted for column-gap), and that will tell you what column this last element is in. Math.ceil() on the value and you have the column count.
Divide the column container's scrollable width by visible width:
container.scrollWidth / container.offsetWidth
Try this:
$.fn.howMuchCols = function(){
return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};
$('.my-stuff-with-columns').howMuchCols();
Code explanation:
This code will create a function 'howMuchCols ' to each jQuery element.
You can't get the width of a element with columns using the conventional way, because his width is used to define each inner column size. To know how many columns the element have inside, you need to get his real width and divide by the columns size, then you will have the column amount.
The way to get the real width is to sum the X offset of the last child element of the columns container with it width, then, subtract it with the sum of the column container X offset.
In the code, I have added the size of one column after make the subtraction and division rather than use the pixel unit before the division (it does not make difference).
The Math.round must be there because not always the container size will be exactly divisible by his inner columns width.
could you set a class to each column such as class="another-column" and then use Jquery to select the classes and iterate them.
var count = 0;
$('.another-column').each(function(){
count++;
});
Warning, this is untested. If you could supply with some html/css3 code I could test it on jsfiddle