I'm having trouble thinking through a proper grid layout for part of a landing page. My issue is with the arrows as shown. The blue/green boxes show the row/column layout I have currently. I have thought about putting the arrows in their own columns but then the "Step X" and summary text won't flow into the arrow columns. The important part is that the images and the text in each column properly line up, especially when switching to single-columns on mobile.
Any advice is appreciated.
Related
I am creating a table where I need to freeze some cell while keeping the other cell scrollable. The table must be responsive to screen size that is why I need to make some cell scrollable.
Based on the picture above, I want to keep the blue area floating/or freeze while the red area scrollable.
How is this possible in google app maker?
First of all, this widget that you refer to as a table in your sample screen is actually a composite widget where it combines several basic widgets like the list, horizontal panel, and pager.
There is another table widget under charts, called Table chart, that can be used to present your data in rows and columns. But if you are looking for a property that can achieve this UI effect, then I'm afraid AppMaker does not support this yet.
If you are really keen to make this work, I would suggest that you combine two table widgets that inherit the same data source then wrap them SIDE-BY-SIDE in a horizontal panel. The left side will only contain columns that you want to freeze while the right size will have the rest of the column that can be scrollable.
Make sure to set the height of both tables to auto-grow based on the content (Fit to content). This will give the effect that the two tables are merged when doing vertical scrolling.
I have here a sample implementation as I described above. I gave a background to the main container to better understand the concept. I also added a small gap to show that I used two table widgets.
Here is the set-up in editor view (screen-shot)
See it in action here (video)
I'm just getting started using the Zurb Foundation 6.4.3 XY Grid. I'm having some trouble conceptualizing how I would do the following:
On large screens, my site should look like this:
On small screens I'd like Panel B to come first, and have a fixed height of 300px:
I have a Codepen of all this here: https://codepen.io/rbrtmrtn/pen/vWYKQP
Right now there are two issues with how this appears on small screens:
I'm not sure how to make Panel B appear above Panel A when that grid-x gets collapsed.
Panel B is a web map which requires a fixed height or some kind of autosizing (like Flexbox grow) in order to work. When I resize the site and collapse the grid-x the map disappears, probably because Foundation is trying to fit the cell to its content and there is none (the map behaves more like a floated element).
Would appreciate any help sorting this out.
A coworker steered me in the right direction -- the answer was to use source ordering, which allows you to specify the order in which elements appear on different screen sizes.
I am currently using a Hierarchical Kendo Grid. You can see some exmples from kendo what I am trying to acomplish foud at this link: http://demos.telerik.com/aspnet-mvc/grid/hierarchy .
Now I have it all working properly as I want, except for how it renders. I have over 15 columns in the child grids within each row, and when I do a horizontal scroll to view them all, the styling all falls apart on the kendo UI.
If you look closely you will see that once a scroll occurs the headers of the parent rows do not stay fixed with the data, and the child grids, the rows extend beyond the rendered view. Has anyone come across this issue, and does any one know what I can do to address this?
If the child grid columns do not fit due to their number or large widths, then enable scrolling for the detail grids.
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#width
I'm very new to some of this, including getting the Boostrap grid down. I'm trying to create a responsive layout where the business graphic essentially slides to the left as you make the screen smaller so that by the time you are at a mobile size, the title, subtitle, login buttons and image are all stacked and centered, and the business graphic still looks like it's sitting on the grey line. For some reason, my image 'jumps up' when making my page smaller and I do not understand why. It should justslide along the grey line and scale down as needed..or that's at least what I am trying to make it do.
Here's a link to what I currently have: http://dev.blueeyesdesign.net/plm/homeimage.html
Any help is greatly appreciated!
It is "jumping" as it hits the thresholds of the columns. When you are using col-xs-# col-sm-# col-md-# etc all on the same row.
Those all stack at different points. Use the same col-[size] in the row if you want them all to stack at the same time.
http://getbootstrap.com/css/#grid-options
Edit: The higher the threshold the earlier the columns will stack.(ie: col-lg-# will stack first, col-xs-# will stack last)
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.