html - Girdlayout for Squares of different size in bootstrap? -



html - Girdlayout for Squares of different size in bootstrap? -

i developing app (node-webkit) shows number of squares (tiles) in kind of gridlayout. tiles same size. when clicked, double theri width , height show more information. looks this, when 1 tile opened.

what want accomplish is, grid layout similiar this:

i using bootstrap v.3 layout. current html looks this:

<div class="form-group row tilecontainer ng-isolate-scope" ng-transclude="" delay="500"> <!-- ngrepeat: info in project.infos --> <div class="tile ng-scope" ng-transclude="" ng-repeat="info in project.infos"> <!-- nginclude: undefined --> <ng-include src="'/html/templates/info_small.html'" class="ng-scope"> <div class="sq-wrapper ng-scope col-xs-2 small" ng-class="open ? 'col-xs-4 medium' : 'col-xs-2 small'"> <div class="info-small" ng-click="addinfodata(info, !open || active)" style="overflow:hidden; overflow-y: auto;"> <!-- =============== little ================ --> <span class="info-title ng-binding" ng-click="toggle()" ng-hide="open || active">info1</span> <!-- =============== medium ================ --> <div ng-hide="!open || active" class="ng-hide"> <div class="row" ng-click="$event.stoppropagation();"> <input class="col-xs-8 col-xs-offset-2 label-input medium center ng-pristine ng-valid" style="text-decoration: underline;" ng-model="info.title"> </div> <!-- ngrepeat: d in info.data --><div ng-repeat="d in info.data" class="row ng-scope" ng-click="$event.stoppropagation();"> <input class="col-xs-5 col-xs-offset-1 label-input ng-pristine ng-valid" ng-model="d.key" ng-blur="deletedataifempty(d, info.data)"> <input class="col-xs-5 label-input ng-pristine ng-valid" ng-model="d.value" ng-blur="deletedataifempty(d, info.data)"> </div><!-- end ngrepeat: d in info.data --><div ng-repeat="d in info.data" class="row ng-scope" ng-click="$event.stoppropagation();"> <input class="col-xs-5 col-xs-offset-1 label-input ng-pristine ng-valid" ng-model="d.key" ng-blur="deletedataifempty(d, info.data)"> <input class="col-xs-5 label-input ng-pristine ng-valid" ng-model="d.value" ng-blur="deletedataifempty(d, info.data)"> </div><!-- end ngrepeat: d in info.data --> <div style="width:100%; height:5px;"> </div> </div> <!-- --> </div> </div> </ng-include> </div> <!-- end ngrepeat: info in project.infos -->

the squares styled via:

.sq-wrapper { padding-bottom: 45%; } .sq-wrapper.small { padding-bottom: 15%; } .sq-wrapper.medium { padding-bottom: 30%; } .sq-wrapper > * { position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; } .sq-wrapper.small .sq-wrapper.medium> * { position:absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; }

does know, how align little tiles in 2 rows, while showing big tile kind of 'colspan=2' & 'rowspan=2' ?

html css3 twitter-bootstrap grid-layout node-webkit

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more