I want to make Gridster grid responsive according to grid resize as well as window resize. Currently I am using DC.js to render charts inside the gridster grid, but if the screen resolution changes from bigger to smaller , the value of the item stored previously for the width for svg remain too big for the screen.
Any tips how to make it responsive. How to set the width of gridster item , it looks to me it injected through java-script.
I found out the answer. Angular Gridster have a event "gridster-resized" , whenever this event happens try to resize the items in the gridster.
Related
I have a background image and I need to add bunch of oval buttons or images on in my case the "greenish" buttons on top of the background image, that I can click in each one of them and call a function passing a parameter. Please look on the screen shot and let me know how I can position every one of the buttons on top of the image and access them with a click (onPress). I guess the only way is using flex box but I couldn't figure out the style for it.
Thanks
Just style all the green buttons on relatively to the image's boundaries with position: absolute. Percentage values for positioning should work, if your image scales properly on screen size change.
I have a function which automatically resize every control according to the screen size. I tried to resize the MSFlexgrid its working but problem is columns are not resizing according automatically with it is there any function so that columns width automatically resized with it?
No, there's no built in auto-column scaling for MSFlexGrid. You'll have to write one yourself.
Thankfully it's fairly straightforward, although don't forget to allow for scroll bars.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I divided the page in two section, in one i have jqgrid with autowidth set to true like in below pic.
Now when resizing the divs using center bar, i want to resize the grid,
using below code i am able to resize but then scroll is appearing in grid which i dont want
Note: Already scrollOffset is set to 0.
$("#grid").jqGrid('setGridWidth', $("#gridarea").width() - 5, true);
Try using the fluidjqgrid plugin. Its pretty good when it comes to making the grid fluid.
You can find it at this site: http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx
I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.
I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can't get either scrollbar to show up. I also can't figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.
Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.
Any help would be greatly appreciated. This really looks like a killer component.
Update from Bill:
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.
If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?
... but I can't get either scrollbar to show up.
Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control's width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.
The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box' size is updated as soon as the image count changes:
procedure TImageGrid.RearrangeImages;
begin
...
FPainter.Height := Max(ClientHeight,
FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);
The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:
VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;
I understand this obviously also works, but I really wonder why the scroll bar's range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.
... I also can't figure out how to dynamically control the images displayed. ...
The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.
... Or how to update the grid based on keyboard events. ...
The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It's a viewer.
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. ... If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.
While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.
Update:
The component you refer to is recently completely rewritten, and some of the answers above are outdated.
It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.
It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.
The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.