PHP - view in column

[Skythrust]

Hi All,

I would like to have a view from my SQLSRV database, everything works fine only the looks aren't that much what I would like to have.

This is wat I got;

You must be registered for see links

The "Plain Text" is what I want, the "Database value" is what I get.

Any suggests how I can realise this?

Code below;

Plain Text Code;

<div class="contentBox">
    <div class="title">
        Visitors
    </div>

    <div class="newVisitor">
        <a href="#" class="name tip" title="Edit user">
            Wendy Alaska
        </a>
                       
        <div class="status signedout">Signed Out</div>

        <div id="clearfix"></div>
    </div>

    <div class="newVisitor">
        <a href="#" class="name tip" title="Edit user">
            Amber Bamber
        </a>

        <div class="status signedin">Signed In</div>

        <div id="clearfix"></div>
    </div>

                   
    <div class="newVisitor">
        <a href="#" class="name tip" title="Edit user">
            Stan Lee
        </a>

        <div class="status signedunknown">Unknown</div>

    </div>

        <div id="clearfix"></div>
</div>

Database Value Code;

<div class="contentBox">
    <div class="title">
        Visitors
    </div>
   

<?php include 'config.php';
    $connectionInfo = array( "Database"=>$SQL_InitialCatalog, "UID"=>$SQL_UserID, "PWD"=>$SQL_Password);
    $conn = sqlsrv_connect( $SQL_DataSource, $connectionInfo);
    $stmt = SQLSRV_QUERY( $conn, "SELECT Firstname,ISNULL(Middlename,'') AS Middlename,Lastname, CASE WHEN CheckInTime IS NOT NULL AND CheckOutTime IS NULL THEN 1 WHEN CheckInTime IS NOT NULL AND CheckOutTime IS NOT NULL THEN 2 ELSE 3 END AS Available FROM Visits
" );
    if( $stmt === false) {
        die( print_r(
        $System_Message, true) );
    }
    echo "<table>    ";
    $item = 0;
    while( $row = SQLSRV_FETCH_ARRAY( $stmt, SQLSRV_FETCH_ASSOC) ) {
    echo "<td>"; ?>
    <div class="newVisitor">
        <a href="#" class="name tip" title="Edit user">
            <?php echo $row["Firstname"]. ' ' .$row["Middlename"]. ' ' .$row["Lastname"]; ?>
        </a>
                       
                    <?php if ($row['Available'] == 1) { ?><div class="status signedin">Signed In</div><?php  }
            else if ($row['Available'] == 2) { ?><div class="status signedout">Signed Out</div><?php  }
            else if ($row['Available'] == 3) { ?><div class="status signedunknown">Unknown</div><?php } ?>
        </div>
        </div>
        </div>
<?php echo "</td>";
            $item++;
                if ($item % 1 == 0) { echo '</tr><tr>'; }    ?>
        <div id="clearfix"></div>
    </div>



           

       
        <?php     }
        echo "</table>    ";
    sqlsrv_free_stmt( $stmt);
   
   
?>

Thanks in advance!

 

[Higoka]

this is more a css problem then a php problem.

first off i would not use a table for this.
wrap all your newVisitor divs inside a wrapper with a display: flex
add flex: 0 0 50%; to newVisitor to stack two items side by side.

<div class="wrapper">
  <div class="newVisitor"> ... </div>
  <div class="newVisitor"> ... </div>
  <div class="newVisitor"> ... </div>
  ...
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.newVisitor {
  flex: 0 0 50%;
}

 

[Skythrust]

this is more a css problem then a php problem.

first off i would not use a table for this.
wrap all your newVisitor divs inside a wrapper with a display: flex
add flex: 0 0 50%; to newVisitor to stack two items side by side.

<div class="wrapper">
  <div class="newVisitor"> ... </div>
  <div class="newVisitor"> ... </div>
  <div class="newVisitor"> ... </div>
  ...
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.newVisitor {
  flex: 0 0 50%;
}

I wish that this was the solution, but still got the same results.

 

[Higoka]

show me your css

 

[Skythrust]

show me your css

Herewith a link to my css file;

You must be registered for see links

 

[Higoka]

of course its not gonna work if you set flex-direction: column
do it like this:

#right #center .contentBox .newVisitor {
  padding: 15px;
  border-right: 1px solid #e5e5e5;
  flex: 0 0 50%;
  /* width: 44.14%;
  float: left;
  display: inline-block; */
}

.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
}

 

[Skythrust]

of course its not gonna work if you set flex-direction: column
do it like this:

#right #center .contentBox .newVisitor {
  padding: 15px;
  border-right: 1px solid #e5e5e5;
  flex: 0 0 50%;
  /* width: 44.14%;
  float: left;
  display: inline-block; */
}

.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
}

Ah I see the issue indeed, otherwise still not the same result as the static content;

You must be registered for see links

 

[DBsyan]

Hmm maybe it's display and not a call issue?

 

[Higoka]

try and change flex: 0 0 50%; to flex: 1 0 50%;

.newVisitor {
  flex: 1 0 50%;
}

 

[Skythrust]

Hmm maybe it's display and not a call issue?

Correct, the call looks fine and I got all the information where I'm looking for

try and change flex: 0 0 50%; to flex: 1 0 50%;

.newVisitor {
  flex: 1 0 50%;
}

That doesn't make any sense