For some reason my responsive grid is breaking when I open my website in Firefox. I'm using skeleton grid system and I haven't really had any problems with cross browser compatibility before but I modified the grid (to a 8 column grid instead of a 16) and I think I may have broken something.
I can't figure it out because all I did was remove the classes for the other 8 columns.
The columns start where they are supposed to but they are huge and extend off the page now.
Here is the live website: http://nicki.smartbrandidentity.com/
Any help is greatly appreciated.
If I were you, I'd just use the 16 column layout. Use the column2 when you would use a column1. These grids are designed to give you as many options as can fit in a grid, and you shouldn't limit yourself to only 8.
Also, looking at the css, this does not look like a "responsive" grid. All of the columns are set in pixels. If you want a really easy grid that is actually responsive, check out the columnal grid system. http://www.columnal.com/
Related
I'm in the need of an Excel like grid in an attempt to convert an "application" written in Google Calc to a real application. I've got one implementation using Vaadin, but it (also) suffers from a long page construction. The screenshot below uses a CSS flex grid with individual divs, and given 6 weeks, there are over 5000 individual divs.
Constructing this page takes over 20 seconds, not something users will be happy about. I'm working on a version based on a table, but it does not seem to improve much. In the end the same amount of cells need to be constructed, whether they are DIVs or TDs does not seem to matter much.
Is there a way to construct such a grid in a more speedy way? I'm more than happy to solve "where did the user click?" on the server side. To be aware of: besides the number of cells themselves, each also has specific content, so just getting a grid shown is not enough.
Each component (div, or something else) is managed by the server. So when you have 5000 of them it's quite slow. You need to reduce the number of components managed by the server.
I can't give you a better answer since I don't know the requirements. But the idea is to try to combine some elements.
You have an example of a table generated ( instead of each element one by one) here: https://cookbook.vaadin.com/grid-details-table.
You can also create or own component. There is also a paid add-on: spreadsheet which seems to fit your needs. It's still in preview: https://vaadin.com/roadmap
The problem here is the complexity of the UI itself. Rendering 5000+ cells will be slow what ever method you use and what ever framework you use. There will be big amount of elements in the DOM and you need to load also lot of data upfront. And as you see the result is huge, and it wont fit most screens. So I would recommend further design of the UI. Is it really necessary to show all the weeks at once? Your UI's complexity will already reduce a lot if you show only one week at the time and add buttons to browse the weeks forwards and backwards. But even with that optimization you will have lot of columns. I would consider adding another browsing direction by day. Further knowledge of the actual purpose of the UI will naturally give more insight how to develop it further.
I have a lot of FlexLayout element in my template and it is so slow on iOS devices.
i replaced that with StackLayout and now it became little fast than before.
I'd like to know which Layout Container is fastest layout in Nativescript.
There is never one right solution for all various needs, which is why we always have options and that applies to layouts in {N} too.
Learn more about layouts interactively at nslayouts.com and choose the one that suits your use case.
If you show use what exactly you are trying to achieve, we may able to give you some suggestion. There are some general guidelines you may have to follow for better performance,
Avoid nested layouts
Use GridLayout when you need known number of partitions in your UI, the less the number of partitions are, the better the performance would be. Use FlexboxLayout otherwise.
If you just want to stack items in vertical or horizontal order, StackLayout may be a good option. Use FlexboxLayout only when you want to use flex box specific features, like when items has to be wrapped to next line, change order of items etc.,
Try to not use StackLayouts just for the shake of borders around, since you can add border to the component itself.
If you have really complicated heavy UI components, you may load it once the page has completed navigation, that may be faster.
Prefer ListView over Repeater / for loop as much as possible.
By following the above at least I can confirm, I don't hit performance issues in my apps where I have 100s of elements and 10s of partitions on screen. If you still face issues, try creating a Playground example where we can see the issue.
I noticed this same thing with FlexboxLayouts on IOS where I was doing animations with the layouts. It worked great on Android, but was very slow on IOS. I switched it to a GridLayout, and things worked a lot better.
Im trying newest commercial version jqgrid guriddo and I need something like min-width on column.
Im trying everything but nothing works fine.
My header column name is so long and for small devices doesnt display correct.
I dont want fixed width becouse for bigger devices is grid smaller.
I need dynamic column which cant be lower than min-width but can be only longer.
In Guriddo there is a such option called minColWidth, which defines the minimal column width when resizing - look in the official documentation here
There was a small problem regarding this options, which is fixed now, so you can test its functionality when you get the fixed code from GitHub
Thank you very much for your help to find this problem.
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.
How can I achieve this kind of grid? What controls/tools I should use? Any idea?
This screen cast is from the Baplie Viewer application. I guess it was done by the captain using visual foxpro while he was sailing.
[Edit]
It is ready-only and column widths will be fixed. It is a kind of reporting generated in a tabular format similar to Grid, but I think we cannot use the native Grid control.
And it may be needed to generate dynamically. I mean we would not be able to use shape tools, line tool, etc. in design time.
Is the grid editable? Or readonly?
A VFP grid control can take any of the VFP controls as the column control source. For example, the "Total" row may be two columns. The second column could contain another VFP grid as it's control source. While the first column is just a textbox or label.
Or, this grid could be readonly and created by using the Line or Shape controls, coloring their areas and using labels to represent the data.
If you are interested in using third party controls like this, I would recommend DBI-Technologies. They have a large selection of custom controls that work with VFP.
That's not a grid control, or a FoxPro control of any type. (Or, at least, that's not the best way to get that effect.) It's a webview control bound to an HTML web page, generated in the background and then displayed most likely via a temporary file.
The easiest way to achieve the effect in a FoxPro application is to use the CUROSRTOXML function and a XSLT transformation.