DevOps 3v.fi Posted May 30, 2017 DevOps Share Posted May 30, 2017 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. 7E101F654E54E71C593E6D33440659C42C52854E077EB0271EBF55AC165087AD3403ED880E173A6CA34CB6E529D64E40 Link to comment Share on other sites More sharing options...
2Core Posted January 21, 2018 Share Posted January 21, 2018 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: <?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. http://getbootstrap.com.vn/examples/equal-height-columns/ Fix for Bootstrap v3.x, which allows you to get the same result as the .row-eq-height class with Bootstrap v4: https://stackoverflow.com/a/22892773 Link to comment Share on other sites More sharing options...
HumaneWolf Posted January 23, 2018 Share Posted January 23, 2018 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. 1 HumaneWolf - Website - Twitter - GitHub Ex-Developer Link to comment Share on other sites More sharing options...
Guest Posted May 23, 2018 Share Posted May 23, 2018 //Moved to Fixed. Link to comment Share on other sites More sharing options...
Recommended Posts