21/07/15 14:49
GN
Ciao a tutti, volevo chiedervi una mano riguardo ad un piccolo problema a cui sono andato incontro sperimentando con Nw.js (github.com/nwjs/…).
Sto utilizzando Bootstrap e jQuery; praticamente ho nella pagina alcuni controlli (un campo di testo ed un pulsante) e sotto di essi un div contenente una struttura a schede, e vorrei che questo div riempisse lo spazio a disposizione, ma mantenendo il bordo inferiore; inoltre l'intera pagina non dovrebbe essere scrollabile, ma dovrebbe esserlo il contenuto di un div che corrisponde ad una scheda.
Come dicevo prima il tutto non gira in un vero e proprio browser ma in un'applicazione webkit integrata con node.js, comunque non credo che questo cambi qualcosa rispetto ad una normale pagina.
Per ora ho questo html
e questo css
e anche questo Javascript per switchare le tab (credo che non c'entri niente, lo posto per completezza)
Il risultato che ottengo è questo: i.imgur.com/…, che ha due problemi: la scrollbar non funziona ed il bordo inferiore non viene visualizzato. Ho provato ad aggiungere vari margin, position:absolute e relative, e cercato un bel po' in rete, ma non sono ancora riuscito ad ottenere il risultato desiderato, quindi chiedo qui se qualcuno mi può suggerire qualcosa. Scusate se è una domanda banale ma sono abbastanza alle prime armi con la gestione del layout. Grazie mille in anticipo.
Sto utilizzando Bootstrap e jQuery; praticamente ho nella pagina alcuni controlli (un campo di testo ed un pulsante) e sotto di essi un div contenente una struttura a schede, e vorrei che questo div riempisse lo spazio a disposizione, ma mantenendo il bordo inferiore; inoltre l'intera pagina non dovrebbe essere scrollabile, ma dovrebbe esserlo il contenuto di un div che corrisponde ad una scheda.
Come dicevo prima il tutto non gira in un vero e proprio browser ma in un'applicazione webkit integrata con node.js, comunque non credo che questo cambi qualcosa rispetto ad una normale pagina.
Per ora ho questo html
<div class="col-lg-6 fill"> <div class="input-group"> <span class="input-group-addon">Images directory</span> <input id="dir" type="text" class="form-control"/> <span class="input-group-btn"> <button id="browseBtn" type="button" class="btn btn-default">Browse...</button> </span> </div> <br /> <div class="panel panel-default container container-full"> <div class="panel-body"> <ul id="tabs" class="nav nav-tabs"> <li id="detailsBtn" class="tabBtn" role="presentation"><a href="#">Details</a></li> <li id="thumbinalsBtn" class="tabBtn active" role="presentation"><a href="#">Thumbinals</a></li> <li id="slideshowBtn" class="tabBtn" role="presentation"><a href="#">Slideshow</a></li> </ul> <div id="tabContents"> <div id="details" style="display: none"> <ul id="detailsList"></ul> </div> <div id="thumbinals" class="tabActive"></div> <div id="slideshow" style="display: none"></div> </div> </div> </div> </div>
e questo css
html {height: 100%;} body {padding: 10px; overflow: hidden; height: 100%} .fill {width: 100%; height: 100%;} .container-full {width: 100%; height: 100%;} #details {overflow: scroll;}
e anche questo Javascript per switchare le tab (credo che non c'entri niente, lo posto per completezza)
$(".tabBtn").click(function(){ $("#tabs").children().removeClass("active"); $(this).addClass("active"); var panel = "#" + $(this).attr("id").slice(0, -3); $("#tabContents > .tabActive").not(panel).fadeOut(500, function(){ $(panel).fadeIn(500); $("#tabContents > .tabActive").removeClass("tabActive"); $(panel).addClass("tabActive"); }); });
Il risultato che ottengo è questo: i.imgur.com/…, che ha due problemi: la scrollbar non funziona ed il bordo inferiore non viene visualizzato. Ho provato ad aggiungere vari margin, position:absolute e relative, e cercato un bel po' in rete, ma non sono ancora riuscito ad ottenere il risultato desiderato, quindi chiedo qui se qualcuno mi può suggerire qualcosa. Scusate se è una domanda banale ma sono abbastanza alle prime armi con la gestione del layout. Grazie mille in anticipo.
Ultima modifica effettuata da GN 21/07/15 14:51
aaa