Jump to content

Team list has empty slots

Recommended Posts

Topic Title: Team list has empty slots

TruckersMP ID: 31812

URL: https://truckersmp.com/team

Server Time / Date: 2017-05-30T02:27:00Z

How to reproduce: open the URL and scroll down to IGA, support sections

Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.71 Safari/537.36
Flash Version: 0.0.0
Cookies (default): Enabled
Java: Disabled

Screenshots / Videos: https://i.3v.fi/truckersmp.com-team.png (notice the empty areas to the left of jeffsfc, valeant, marco6158, titanic4 and penguin)


It is caused by some long names using two lines instead of one and some profile pictures being non-square. Easiest solution would be to use one .row to contain 4 of each, though it might still cause the issue on tablet-size windows, where there's only two columns.

Share this post

Link to post
Share on other sites

I'm actually surprised about the fact that this got ignored (no one even replied to this topic), it should be an easy job for someone who knows much about Bootstrap and programming to fix this issue.
I know the website might be low priority for the whole team, but I assume the team also has people who only work on the website, so he/she should have fixed it by now (or even before the page got published). But then again, the person who works on the website might not just have time to fix it.

An easy fix would just be the following: Show the staff member's profile picture from the forum instead of their own submitted pictures (as IPS obviously changes the images to a fixed size) and give the area, where the staff member's information is shown, a fixed height.


Or you can also just create a row for 4 items and repeat that process.

An example that shows us how that's done with PHP:

$resultAmount = 13; // The amount of rows that got returned from your database
$colSpan = 4; // Amount of items inside a row
$html = ""; // The end result that will be echoed on the page.

$html .= "<div class='container'>"; // Define a container

// Loop through the returned rows
for($i = 0; $i < $resultAmount; $i++){

  // If the loop has done 4 items, add a new row and then put the next item inside it
  if($i % $colSpan == 0) {
    $html .= "<div class='row'>";

  // Give a returned row a place inside the $html variable
  $html .= "<div class='col-md-3 col-sm-6 md-margin-bottom-50'>" . $i . "</div>";

  // If the loop is currently executing the code for
  // the fourth item, close <div class='row'> to prepare the next run
  if($i % $colSpan == 3) {
    $html .= "</div>";

$html .= "</div>"; // Close the container

echo $html; // Echo the end result

The result you get when you execute this script:




If you really want to fix this with a nice solution, use Bootstrap v4. Bootstrap v4 uses flexboxes and thus are you able to use .row-eq-height class to give all of your columns inside your row the same height as the highest column inside that row.



Fix for Bootstrap v3.x, which allows you to get the same result as the .row-eq-height class with Bootstrap v4:


Share this post

Link to post
Share on other sites

The website is not low priority, but we are working on other backend changes which will be completed before we make other changes. It's easy to fix, when we get around to it. This specific issue isn't high priority because it is purely visual, and the forum team page gives a better overview on the people on the team regardless.

  • Thanks 1

Share this post

Link to post
Share on other sites
This topic is now closed to further replies.

  • Create New...