CSS: Position List Items Horizontally and Display Scrollbars When Needed

Is there a CSS doctor in the house?

I’m experimenting with using nested lists to build workflows (or, in this specific example, call flows). TiddlyMap may ultimately be the solution I settle on, but for now, I’m expanding a rickety re-implementation of some CSS nicked from a family tree TW many moons ago.

(Apologies for not crediting the source. I’ve lost track of it, and this is the first time I’ve ever shared anything based on it outside my personal TWs. I’ll try to find it.)

This works mostly — but the nodes on my tree are wrapping to new lines, and this is something I’d like to prevent. Ideally, the tree should just sprawl out, with scrollbars being displayed within the containing tiddler. (This allows the user enough control to scroll to points of interest while still maintaining a view of the overall logic of the tree.)

See this demo TiddlyWiki for an example. The home tiddler describes where I’m stuck and links to my stylesheets. Below it is an example of what my tree looks like.

@Secret-HQ I cant help you with the CSS but of course using the

ControlPanel > Appearance >Theme Tweaks > SideBar layout = Fluid Story, Fixed sidebar

Then using the zoom in/out feature I quickly avoid any line wrapping.

On the subject of call processing I did something similar in the past for work in tiddlywiki which I called “ping pong” as it often the case with communications as one responds to a voice mail with another voice mail left etc… but it is interesting how you are visualising it.

Funny you should note that, @TW_Tones: I usually prefer the Fluid Story, Fixed Sidebar layout, but I thought keeping the story river narrow here would make it easier to the see the wrapping I’m trying to eliminate. :sweat_smile:

What motivated me to bring a bunch of notes on scrap paper into TiddlyWiki was the opportunity to use the <$reveal> widget to hide and reveal sections of the workflow with a click. The ultimate goal is to build a comprehensive tree anyone in the company could use to see the variety of ways we can direct calls on the network.

Beyond that: Boy, it sure would be cool if we could associate values with each node so that individual branch managers could play with the tree and see real-time calculations of what different setups would cost them in terms on initial investment. But that version will probably stay a lovely fantasy in the always far-off future. :star_struck:

I see Tiddlywiki as a great tool for business intelligence and modeling and have some grand ideas I may implement if I live long enough :slight_smile:

My ideas involve capturing an organisations structure and capturing the relationships between teams than allowing hypothetical restructure’s to allow the consequences to be evaluated.

More importantly the idea would be to provide to the whole organisation an everyday tool that helps them navigate who does what and even request a service and permit a fuzzy request that filters through the organisation until answered.

.tree { overflow:auto; } .tree ul{ display:flex; flex-wrap:nowrap; }

Let me know if this achieve what you wanted :slight_smile:

1 Like

Flex!

@telumire, you are a godsend! :grinning_face_with_smiling_eyes:

I’d never used flexboxes before, didn’t really know how, and honestly had forgotten they existed. This old man was close to trying some truly embarrassing strategies to fake that effect. :crazy_face: Thank you so much for taking time to share the answer. You saved me another evening of feeling stupid and at least an hour of chasing bad-idea trial-and-error solutions.

1 Like

Glad I was able to help !

Btw you dont need “flex-wrap:nowrap;” - apparently this is already the default.

1 Like