Why isn’t the “Fluid” PageFlow fluid?

Question

0.00/5 (No votes)

See more: (untagged)

I was hoping that the “Fluid” PageFlow would enable me to avoid horizontal scrolling on this website when snapping my browser window to one half of my screen. However, the horizontal scroll bar still appears: http://imgur.com/yyPoqdt[^].

What is the difference between “fixed” and “fluid” and this this intended behavior?

Posted 10-Nov-14 6:15am

Nathan Phillip Brink

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-11-10T06:26:00

Solution 1

It is actually fluid.

But all properties, including "fluidity", have some domain where they are applied. It is apparent that when the client with of a window becomes smaller than some critical size, fluidity would fail. Take a normal physical liquid. If you make the vessel narrow and narrow, strong capillary effects start to dominate. And when you make your container close to the molecule size (yes, sometimes it's possible), the substance essentially looses its normal "3D" (bulk) fluid properties.

However, there is something wrong with your observation, as far as I can see it on your picture. I just tries to resize this page using "fluid". I successfully resize it to the size where the width of the bounding rectangle of this edit area becomes about some 5 em. The column on right remains of the same width. When the size is more than that, I observe perfect fluid behavior.

Try to disable all cookies for this site, set fluid and try again. I'm asking you to do so because I observed some glitches related to cookies. If you see problems or different behavior, please report your observations in detail here: http://www.codeproject.com/suggestions.aspx[^].

[EDIT]

My more detailed observations are shown in my comment below. Now I think that our observation match and the behavior is reasonable enough. You just need to scroll in both directions, to see how this layout works. Maybe it could be improved, but I don't see any faulty behavior. You can understand it in this way: the term "fluid" is related to the layout of the columns below the horizontal top strip.

—SA

Posted 10-Nov-14 6:26am

Sergey Alexandrovich Kryukov

Updated 10-Nov-14 9:54am

v2

Comments

Nathan Phillip Brink 10-Nov-14 14:51pm

I tried your idea on deleting cookies. If I access http://www.codeproject.com/Questions/ask.aspx?PageFlow=Fluid with a new empty browser profile, the bottom of the page underlines “fixed” instead of “fluid”. If I log in, then “fluid” is underlined but I can’t tell the difference in the page layout.

Then I tried visiting other pages on the site. Apparently ?PageFlow=Fluid works on the http://www.codeproject.com/script/Articles/Latest.aspx page but not on the question asking page. On http://www.codeproject.com/script/Articles/Latest.aspx, clicking the fluid/fixed actually toggles it and I can see the fixed width failing to fill up my whole browser’s viewport when made wider. I even tried Fluid layout in IE and it renders a horizontal scrollbar just like SeaMonkey (Mozilla) even after getting the layout to be set to Fluid.

How are you getting the textbox on the questions ask page to be fluid? I think I might just write a userstyle to remove the extraneous min-width floating around somewhere…

Sergey Alexandrovich Kryukov 10-Nov-14 15:51pm

All right, thank you for trying.

Let me make my observations more accurately. Now I think it's possible that my observations match yours. Above, I did not pay attention for horizontal scroll bar.
I just look at the current page as I type the answer or this comment. I make the width of this page smaller, and see the full content.
I keep seeing full content until the room for the left columns (where my answer and this comment are) until there is enough room for the longest word in the text. If I reduce the width even more, clipping of that text starts to occur, which I consider as a normal thing. The right column (where "Top Experts this month" are listed) still shows full content at this point. No matter what happens if I reduce the width even more.

But now, I also paid attention for the horizontal scroll bar. It appears much sooner, when the left column becomes approximately double size of the right column. But now I can see why. If I use scroll, I can see no content on right, only wide space. Nevertheless, it's clear why the horizontal scroll bar appears. To see it, scroll all the way up. You will see that the horizontal top band has not enough room (CodeProject, number of users ... user name ... "Sign out", [x]). To see this content on right (... "Sign out", [x]) you have to scroll far right. It looks reasonable and correct.

—SA

Nathan Phillip Brink 11-Nov-14 9:38am

In fiddling around with DOM Inspector and Stylish, it appears that the minimum width on most pages comes from the 728px-wide banner ad—which isn’t fluid. And probably mostly because ad brokers purposefully give little control over ad shape and placement to websites. Hrm…

You can see how the user prefs/logout bar is willing to get small as long as stylish tells the ad to be smaller. The following snap is with the browser window just skinny enough to cause the horizontal bar to appear: http://imgur.com/0pgjQy2 . Sorry, you can’t see the ad because I use noscript, but its placeholder was still taking up space. You can see my ugly stylish sheet here: https://gist.github.com/binki/c97680627258fa037637 .

Sorry, I’m not going to spend too much more time on this. Also, codeproject is definitely not the only website that likes to create a horizontal scrollbar when my browser window is snapped to fill one-half of the screen, I was probably just venting my frustration against the world directly on codeproject this time :-/.

Sergey Alexandrovich Kryukov 11-Nov-14 9:58am

I understand. I personally prefer "more fluid" and simple behavior...
—SA