Flexible vs Static Values

HTML & CSS
1

I have a listing of member accounts, and at the top is a header bar that contains values like this…


Deposits: $2,511	Withdrawals: $1,059	Balance: $7,394

The problem - as I see it - is that IF the fields to the left are small or blank, it causes everything to shift left.


Deposits: --  Withdrawals: --  Balance: $7,394

To me this is slightly annoying, because if you want to scan down the listing of accounts, things don’t line up. (BTW, there is a lot of other account data beneath each header, so I can’t do anything obvious like put everything in a table.

It is more like this…


[b]Deposits: $2,511	Withdrawals: $1,059	Balance: $7,394[/b]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet 


[b]Deposits: $3,904	Withdrawals: $7,000	Balance: $25,901[/b]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet 


[b]Deposits: $3,000	Withdrawals: $1,000	Balance: $15,000[/b]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet

Questions/Comments:

1.) Do you think this is an issue if the labels collapse to the left?

2.) Would it be better if I wrapped the header data in a mini-table so the labels always lined up?

3.) Is there a way to keep the labels in the same place without using a Table?

Hope that makes sense? :-/

Sincerely,

Debbie

2

Try thisL



function table($x) // $deposits=0.0, $widthdrawals=0.0, $balance=0.0)
{
  setlocale(LC_MONETARY, 'en_US');

  $x0 = money_format('%i', $x[0]);
  $x1 = money_format('%i', $x[1]);
  $x2 = money_format('%i', $x[2]);
  $sp = "     " ;
  
  $table = <<<XXX
  Deposits: $x0  $sp  Withdrawals: $x1  $sp  Balance: $x2 
  <br />
  $x[3]

XXX;

  return $table;
}

  $msg1 = $msg2 = $msg3 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet';  
  $xs = array 
  (
    array( 2511, 1059, 7394,  $msg1 ),
    array( 3904, 7000, 25901, $msg2 ),
    array( 3000, 1000, 15000, $msg3 ),
  );
  foreach($xs as $x):
    echo table($x) .'<br /><br />';
  endforeach;

Sincerely,

John_Betong

3

You love programming more than anything in life, don’t you, John? :lol:

Debbie

4

It passes the time away.

Did it work?

5

Like most of your replies lately, it didn’t even have anything to do with the questions I asked… :slight_smile:

Debbie

6

If you set a min-width on the label that ensures that even if it’s blank, it will still not collapse to nothing. The text can make it expand if needed. The label will need to be set to display:inline-block or some other display value that allows for width to be set.

Is that what you were wondering about?

7

The Label is not what is coming and going. It is the data…

Right now, I have this - which I know is very lacking in CSS/THML terms…


	<div class='rowTwo'>
		<span class='accountStats'>Deposits: $2,511 <span class='pct'>(33.9%)</span></span>
		<span class='accountStats'>Withdrawals: $1,059 <span class='pct'>(14.3%)</span></span>
		<span class='accountStats'>Balance: $7,394</span>
	</div>

It looks like they are all inline as well.

I thought sticking this data in a Table Row might make sense because then you are in essence saying the “Deposits” label is in a spot that is 20px wide, and the data for it is in a spot that is 25px wide, and so on…

If I can do the same thing without using a table, fine by me.

Of course, backing up…

Is it a big deal - visually - if all of these items collapse as the size of the numbers change?

I think so.

To me it would look better - as shown in my example above - if I created standard-width slots for all of the Label/Value pairs that were big enough to handle the data as it changes, BUT ALSO ensures that if something like Deposits = $0 that everything would NOT move on me.

Again, the effect I am looking for is that a manager could scan down the page of all user accounts and not have to shift their eyes because things move.

Sincerely,

Debbie

P.S. How this relates to John’s function, array and ForEach loop above still escapes me… :lol:

8

Hi, Debbie.

Is something like this what you have in mind?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display:table</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1229279-Flexible-vs-Static-Values
2014.08.18 11:29
DoubleDee
-->
    <style type="text/css">
.outer {
    width:80%;
    margin:0 auto;
}
.trow {
    display:table;
    table-layout:fixed;
    width:80%;
    border-spacing:0;
    outline:1px dotted #888; /* TEST Outline */
}
.trow > div {
    display:table-cell;
    vertical-align:top;
    font-family:Verdana,Arial,sans-serif;
    padding:.25em 0;
}
.tcell1 {width:35%;}
.tcell2 {width:40%;}
.tcell3 {width:25%;}
.trow span {
    display:inline-block;
    vertical-align:top;
    padding-left:.5em;
}
.trow .pct {padding-left:.25em;}

p {
    color:#888;
    line-height:1.4;
    margin:.5em 0;
}

    </style>
</head>
<body>

<div class="outer">
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$2,511 <span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$1,059 <span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$7,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$22,511 <span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059 <span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$77,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$222,511 <span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$111,059 <span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$777,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$2,511 <span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059 <span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$777,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$222,511 <span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059 <span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$7,394</span></div>
    </div>
</div>

</body>
</html>
9

That’s pretty funky! :slight_smile:

I would be curious what your answers are to the questions in my OP, though… :wink:

Debbie

10

You could wrap this in a table - make those deposits / withdraw / balance be table headers, and then for the tbody you can have just a single cell - since it seems you only have one. I’d set each <th> width to be 33% or something that way it never collapses.

  1. I’d be annoyed by the collapsing label
  2. I’ve given an alternative-ish solution above.
  3. There is but using a table would be easiest, not to mention it looks like it would also be semantic since you appear to have tabular data.
11

Probably not a giant issue. Probably depends on the individual. I would annoy me… which is why I went ahead and wrote the example with predictable placement of the labels and data.

Which is sorta what I did by assigning table properties to divs. :slight_smile:

Which is sorta what I did, too. (<div>s aren’t HTML table tags) :stuck_out_tongue:

If you are asking if other tags can be used, the answer is “of course”. You can float 3 containers (<div>s most likely) and assign them widths that total 100% of their parent container, etc. However, I like the {display:table} method as it is both stable and flexible.

The sample code that you wrote seemed like it was on a good track to me.

12

Hi Debbie,

I have taken the liberty to upload both @ronpat;'s exaample (with slight modifications, added a banner and displayed source code). I have also included post #2 function which you could not understand.

http://www.johns-jokes.com/downloads/sp-c/debbie-flexible-vs-static-values/

The idea of the function was to be able to pass an array of hard-coded Debug, values. These values can easily be changed to pass an array gleaned from your database.

As you may notice the function is rather small but most importantly, I believe satisfies all your requirements.

Post #2: I was hoping that you would at least try the supplied script and mold it to perfection rather than not taking the time to understand the simplicity.

Sincerely,

John_Betong

PS: I was trained as an engineer to get the job done rather than lengthy discussions of possible hypothetical implications, :slight_smile:

13

[ot]In his defense, maybe, just maybe, John is giving the right answer but you’re asking the wrong question :wink:
double off-topic
got a link to your MVP site yet? I for one am most curious to see the fruits of your labor[/ot]

14

Okay, so there seems to be a consensus that what I have now needs to be improved.

Your code seems to behave the way I want, but I have to be honest when I say that it scares me too, since I’m not familiar with your approach.

(Wish I had my SitePoint books with me on the road!)

Can you please explain the differences and merits of using a formal HTML Table vs your <div>/CSS approach?

Also, can you give me some reassurance that your approach will work across all browsers and maybe even some mobile?

Off Topic:

You have to respect that I am at a distinct disadvantage these days since I can’t just post my webpages up here…

First of all, I need to keep my final product close to my chest before going live for obvious reasons.

Secondly, my website has become so enormous - at least to me - that it isn’t practical to try and dissect it and assemble samples here.

All of this leaves me pretty paranoid these days when people suggest things - especially when they are off-the-beaten-path.

I definitely love learning new things from you SitePoint gurus, but I am extra cautious these days that I don’t blow up my website! :slight_smile:

I sense that a code improvement is just around the corner. Just need to work out a few kinks and make sure I understand what I’m doing! :slight_smile:

Sincerely,

Debbie

15

Tables vs <div>'s with table-like properties is merely semantics. <table> is to be used for tabular data - if it is not, then tables should not be used since it is misuse of it. Divs are divisions on the page - they are holding blocks. They can go anywhere.

Noone can assure anything until you plug it in your page and see how it adapts to the other parts of your code - namely whether you made it fluid for different screen sizes, and whether you took proper care of the mobile version to ensure that nothing would break. By default though, it should be fine, and if not, the fixes should be simple. Create a dummy page and plug this new code in and see what happens - if it turns out to be good, then plug it in the live site.

16

So if you were doing this, Ryan, would you go with John’s <div>/CSS code, or are you “old-school” and would you go with a formal HTML Table?

Sincerely,

Debbie

17

Debbie,

IMO, there is no requirement for a formal table. You are not trying to create a matrix of data (tabular data). You are merely trying to format one line of information. This is a common technique used when creating a horizontal menu. No one will break your bones if you choose to use an HTML table. It simply isn’t necessary.

The code will work in all devices (that I’m aware of) from IE8+. As Ryan wisely said, no one can say for sure. Ya just have to plug it in and try it. But I’ve been using it since IE8 came along and am satisfied that it works reliably. There ARE quirks, such as: one cannot absolutely position an item within a table cell in relation to that cell. That still requires a non-table container. If you are familiar with tables, though, you should have no problem with the code other than adjusting to its idiosyncrasies.

PS: I doubt that you will find many people in these forums who are “older school” that I am. :stuck_out_tongue:

18

Johns code looks perfectly fine with me, and ignoring the semantics side of things, I would say go with John. If you have tabular data then by all means, swap out the divs with the appropriate table elements. It shouldn’t be hard - any CSS with display:table-cell can be reverted to <td>, and so on.

19

Okay.

Okay.

Agreed. You’re ANCIENT!!! :rofl:

Sincerely,

Debbie

20

Hopefully we both meant RonPat’s code… :blush:

Debbie