[Pro] Controlling how items wrap in a listing

I am working on this as my first complete responsive site in Freeway 7.
Its been a bit of a labour of course but I have learned a lot in the process and doubtless have much more to learn.

In the staff list I have the organisation section names, job titles names and email addresses in lists. I have bee trying to manage how they fold or wrap under in a consistent manner when views through the various break points. However I can’t seem to get a consistent working setup. I think I am quite close to having something which works, however…

The line with the name Katarina in it doesn’t seem to behave as it should and I have tried many variations on it but still the surname folds under the forename when it shouldn’t.

Is it possible that there is a tidier way to arrange such a page which will allow them to fold under.
Is this a messy way I have set it up?

Any insights would be most helpful.

Many thanks

Anthony

http://www.cyca.org.uk/newsite/contact.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I think that this is a case where I would use a Table to display this Data.

Then I would then use another Table (different layout) at smaller widths.

You could go down the road of creating a ResponsiveTable using some JS but probably not worth the hassle.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks David,

I did have it setup as a table initially but was trying to achieve a set up which was responsive and filled the space with the text neatly.
A responsive table sounds interesting but if its loads of javascript then its maybe beyond me.

I reckon if I can resolve the line with Katarina on it then I may have a bit of a workable solution.

I guess if there is no other way to achieve this then maybe I need tae set the tables!

I was wondering if anyone maybe had examples of similar setups which never used tables at all?

Many thanks

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at:

if there is no other way to achieve this then maybe I need tae set the tables!

Sure there are other methods using Divs and adjusting Top/Bottom margins at different BP.

Just felt that a table is easy (actually 2 tables) especially as you are showing tabulated data.

Hide the big table at narrower widths and vice versa at bigger widths.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hide the big table at narrower widths and vice versa at bigger widths.

And here is a v quick example

http://www.deltadesign.co/FW7Test/table-widths.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Anthony,

This is a complicated want for a lot of reasons. I think that it’s good that you are looking for a better way to do this-- I can see that you’ve put some work into this page and have many clean tags. Good work.

However, there are still many inconsistencies in your layout and you will need to focus on bringing more logic into the layout, especially how you apply padding and margins. Of course, you will want to also continue to wean yourself from some of the less helpful actions (i.e., the Clearfixing action). The only items that ever need clearfixing are parent containers of floated items.

As for your “list”, there are several ways to present this information-- but I agree with Dave that the best presentation of this material is in a data table. Unfortunately, Freeway was never any good at data tables and even the World Court ruled them to be cruel and unusual forms of torture. I usually write them by hand now, but I made an exception for you in this case.

thebigerns.com

Freeway still writes tables with inline styles that are crazy hard to overcome. The reason you want control of table styles is that tables (and everything else in HTML) are bunches of boxes… which you can control with CSS.

So like any inflow layout, you can set table elements in ways so they react flexibly just like an inflow layout. This is super cool, provided you can make Freeway give you something workable.

Now I won’t lie, this is still complex. I’ve re-created your layout-- as I think it should be, however, because of time constraints I don’t bother with the form elements or the iframes for the Google maps and integrating those are going t be a challenge. But at least I could chime in on the table.

No offense, but I don’t like the idea of serving different tables at the breakpoints. It is a desperate move and I understand sometimes that’s the corner we get backed into. I’d still rather fight for a solution that is less undesirable.

A table can be treated like any other flexible inflow box, just expect Freeway to fight you at every step. You can see that in Freeway, the page doesn’t look like the finished output-- but it is logical… you can understand how these containers work together and how items are arranged.

The styles are mostly straight-forward, and match elements that you find in a data table. Those new to CSS styles may still have trouble decoding how they work, but it will come… especially if you stick with it.

There is a style that I think of as important to how I make flexible layouts, and that is my box-sizing style,

*, *:before, :after { box-sizing: border-box; }

While this doesn’t make Freeway any easier to work with, it does make the output easier to calculate when using percentage and flexible dimension. Freeway is always wanting to adjust dimensions in the Inspector based on margins and padding and then starts telling you what you can or can’t do. Screw that, we are in charge of this layout. So some things in my layout are styled some with the Inspector, some with the Item Extended, and some by pure CSS styles. My hope is that I’ve left enough breadcrumbs that you can eventually work it out.

Just about the phone breakpoint, I take the table cells and float them, like boxes inside the table row element and ask them to be 100% wide. This has the effect of stacking them up vertically, which seems like a better presentation. It’s still a table (the same table) but CSS lets us treat the table like any other set of nested boxes.

Here are a couple other things I wrote about tables and Freeway that may be helpful. I wish that I would date these things.

thebigerns.com

thebigerns.com

thebigerns.com

thebigerns.com

thebigerns.com

Best of luck!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I don’t like the idea of serving different tables at the breakpoints.

Sure but my method was offered as an ‘easy’ solution that requires no ‘under the hood’ action.

Ernie - you never cease to amaze me with how much effort you are prepared to put into your answers. Great job.

Makes mine look like a real POC.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

DeltaDave wrote:

Sure but my method was offered as an ‘easy’ solution that requires no ‘under the hood’ action.

Ernie - you never cease to amaze me with how much effort you are prepared to put into your answers. Great job.

Makes mine look like a real POC.

To be fair, I’ve also advocated the switcheroo method in the past. And, who knows… maybe I’ll change my mind about it again in the future. Maybe even fifteen times.

One of the hardest things about web design is being certain that you are doing it “right”, or knowing whatever that even means. People like us are trailblazers, hacking our ways through a dense jungle with no guides. We discover what works, and then start all over again to look for what works better.

Thank you Dave for recognizing my effort, but I have to say that I couldn’t have gotten as far as I have without comrades like you to inspire me onwards.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello Ernie and Davie,

I am as ever in awe of your explanations and insight. I know that it has come from long periods of digging and testing and digging and testing so I am heartened to know that you are indeed willing to share the great understanding you have of CSS, structure etc.

I shall do a bit of digging through the setup you have created Ernie and see how it should be done from that. There is a lot to be gleaned from such examples and I am looking forward to that.

I shall doubtless read through your response countless times to make the most of the generous amount of information you have put into it.

With the way I had set the page up in the last iteration then I had been testing how it worked just by working on the top half of the list, which explains why some of it is setup differently from the bottom half. Once I got it right with the top half then I would apply it to the rest.

I hadn’t realised that putting together such a list would be such a challenge technically for a responsive setting. I seem to have a habit of wanting to achieve things which are not always straightforward such as the horizontally loading sub menu. But facing such challenges and with help such as yours in finding solutions, then I am hopefully improving and increasing my knowledge and understanding not only of Freeway but the bigger picture of CSS and responsive web design.

I am truly indebted to you for your help. What more can I say.

I shall doubtless be back in touch once I have had the chance to work things through from your example.

A big responsive thank you to you both for your help.

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hello Ernie and Davie,

Pet hate of mine - being referred to as Davie.

I think it is primarily a Scottish corruption of the name.

David/Dave/DeltaDave - all 3 of us in fact!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Apologies Dave!

I have three friends who use different variations of the name to be referred to! Davie, David and Dave!

Point noted.

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at: