javascript - Keep elements order which are in a row on smaller screens -
this may trivial question can't head around it. created container fluid has rows inside, pretty basic stuff, i'd not stack in mobile version , keep still in panel.
it stays in panel in mobile version, result horrifying. i'm displaying 2 rows on top of each other, 1 holds information player points, ratio, score etc , lower 1 has values. but, when stacked make no sense @ all.
i'm creating elements dynamically javascript, shouldn't important, problem don't know class change @ point.
//creates row function createrow(pos,name,coef,ratio,points){ //this horizontal row var upper_row = document.createelement("div"); upper_row.classname = "row"; //these horizontally positioned elements var koht = document.createelement("div"); koht.classname = "col-xs-1 suurem"; koht.textcontent = pos; var tyhi = document.createelement("div"); tyhi.classname = "col-xs-7 suurem"; tyhi.textcontent = name; var koef = document.createelement("div"); koef.classname = "col-xs-1 suurem rait"; koef.textcontent = coef; var suhe = document.createelement("div"); suhe.classname = "col-xs-2 suurem mid"; suhe.textcontent = ratio; var point = document.createelement("div"); point.classname = "col-xs-1 suurem rait"; point.textcontent = points; //adds elements row children upper_row.appendchild(koht); upper_row.appendchild(tyhi); upper_row.appendchild(koef); upper_row.appendchild(suhe); upper_row.appendchild(point); return upper_row; } where
.inf { font-weight: bold; } .suurem{ font-size: 18px; } .vasak{ text-align: left; } .mid{ text-align: center; } .rait{ text-align: right; } this how looks in desktop:
now mentioned earlier, positions in rows messed in mobile version (p runs koht , on..). can't provide picture, tested in huawei g6 , did not result.
the result i'd elements positioned in way positioned in image above.
using table acomplish same results , work on different screen sizes
<div class='container'> <div class='row'> <div class='col-sm-12'> <div class='panel panel-default'> <div class='panel-heading'> <span class='panel-header'>title</span> </div> <div class='panel-body'> <table class='table'> <thead> <tr> <th>koht</th> <th></th> <th>k</th> <th>s</th> <th>t</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>kevin</td> <td>0</td> <td>0:0</td> <td>0</td> </tr> <tr> <td>2</td> <td>james</td> <td>0</td> <td>0:0</td> <td>0</td> </tr> <tr> <td>3</td> <td>steve</td> <td>0</td> <td>0:0</td> <td>0</td> </tr> <tr> <td>4</td> <td>foo</td> <td>0</td> <td>0:0</td> <td>0</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> 
Comments
Post a Comment