1

Building an app that queries database for optical images for patients. The results are sorted by date and organized into tabs. Each patient could have any number of tabs based on their history of doctor visits. My tabs are organized horizontally at the top of my page. When there is only one row worth of results tabs (no matter how many) the page looks fine. However, if the amount of tabs exceeds the amount that can be contained in the first row (about 10), a second row starts. This creates a gap between my results tabs and the div that holds their contents.

What I want to know is if it would be possible to create extra "placeholder" tabs that could fill this empty space and how I might go about doing that. Obviously every patient's results are different so I would need to make enough extra tabs to fill any sized gap.

CODE:

<ul class="tabs" id="results">
    <?php
    if(isset($_GET['id']) && $_GET['id'] != '')
    {
      $id = $_GET['id'];

      $query = "select * from SHOT join VISIT on VISIT.ID=SHOT.VISIT_ID JOIN PATIENT ON SHOT.PATIENT_ID=PATIENT.ID where SHOT.PATIENT_ID=
            " . $id . " order by VISIT.VISIT_DATE DESC;";

      $res = mysql_query($query);
      //Here we count the number of returned rows. If it returned nothing then it will store 0.
      $count = mysql_num_rows($res);
      $i = 0;
      $j = 1;
      if($count > 0)
      {
            $previous_vdate = '';
            while($row = mysql_fetch_array($res))
            {
                    $id = $row['ID'];
                    $vdate = $row['VISIT_DATE']; 
                    $img = $row['IMG_FILENAME'];
                    $subdir = $row['SUBDIR'];
                    $subsubdir = $row['SUBSUBDIR'];

                    if ( strcmp("$vdate", "$previous_vdate") != 0)
                            {

                                    $formatted_vdate = explode(" ", $vdate);
                                    $formatted_vdate = explode("-", $formatted_vdate[0]);
                                    $visit_date = $formatted_vdate[1] . "-" . $formatted_vdate[2] . "-" . $formatted_vdate[0];

                                    if ($j == 1)
                                    {
                                            echo "<li class='active' rel='tab" . $j . "'>" . $visit_date . "</li>";
                                    }
                                    else
                                    {
                                            echo "<li rel='tab" . $j . "'>" . $visit_date . "</li>";
                                    }
                                    $previous_vdate = $vdate;
                                    $j++;
                            }
                    $i++;
            }
      }
      else
      {
            echo "<div id='no_result'>No result found !</div>";
      }
      echo "<li rel='tab" . $j . "'>All Dates Combined</li>";
    }
    else
    {
            echo "<p>Something's Broke</p>";
    }
    ?>

All help is appreciated. If there's any other info I can add let me know... I'll be in front of the computer for the next several hours, checking/refreshing this page.

Generated HTML:

<ul id="results" class="tabs"><li class="active" rel="tab1">
  04-23-2012
</li><li rel="tab2">
  04-10-2012
</li><li rel="tab3">
  03-05-2012
</li><li rel="tab4">
  06-06-2011
</li><li rel="tab5">
  12-14-2010
</li><li rel="tab6">
  12-14-2009
</li><li rel="tab7">
  12-15-2008
</li><li rel="tab8">
  12-12-2007
</li><li rel="tab9">
  02-07-2007
</li><li rel="tab10">
  11-01-2006
</li><li rel="tab11">
  11-03-2005
</li><li rel="tab12">
  03-13-2002
</li><li rel="tab13">
   All Dates Combined
</li><li>

Here is the screen shot: https://i.stack.imgur.com/adTuc.jpg

reubenCanowski
  • 262
  • 1
  • 4
  • 20
  • This seems more of a html / css problem than a php one. Can you post the generated html and a screenshot of the problem? – jeroen Feb 14 '13 at 16:15
  • You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. – Quentin Feb 14 '13 at 16:29

1 Answers1

1

If you are allowed to use Javascript I can recommend you to use auto-fit:

Demo: http://pmbennett.net/demos/autofit-tabs.html (try it by changing the size of your browser window)

Source: http://pmbennett.net/2010/03/26/auto-fit-tabs/

Disadvantage: Not a CSS-only solution

Personally I think a tab without function, just to fill the empty space, would confuse users. I think users would click it and nothing would happen. Maybe it is also easier to give the empty space a lighter (grey?) background.

pedak
  • 91
  • 3