Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Div scrollabile che riempie la pagina mantenendo il bordo
Forum - HTML / CSS - Div scrollabile che riempie la pagina mantenendo il bordo

Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 16:49
Martedì, 21/07/2015
Ciao a tutti, volevo chiedervi una mano riguardo ad un piccolo problema a cui sono andato incontro sperimentando con Nw.js (https://github.com/nwjs/nw.js).
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
Codice sorgente - presumibilmente HTML

  1. <div class="col-lg-6 fill">
  2.     <div class="input-group">
  3.       <span class="input-group-addon">Images directory</span>
  4.       <input id="dir" type="text" class="form-control"/>
  5.       <span class="input-group-btn">
  6.         <button id="browseBtn" type="button" class="btn btn-default">Browse...</button>
  7.       </span>
  8.     </div>
  9.     <br />
  10.     <div class="panel panel-default container container-full">
  11.       <div class="panel-body">
  12.         <ul id="tabs" class="nav nav-tabs">
  13.           <li id="detailsBtn" class="tabBtn" role="presentation"><a href="#">Details</a></li>
  14.           <li id="thumbinalsBtn" class="tabBtn active" role="presentation"><a href="#">Thumbinals</a></li>
  15.           <li id="slideshowBtn" class="tabBtn" role="presentation"><a href="#">Slideshow</a></li>
  16.         </ul>
  17.         <div id="tabContents">
  18.           <div id="details" style="display: none">
  19.             <ul id="detailsList"></ul>
  20.           </div>
  21.           <div id="thumbinals" class="tabActive"></div>
  22.           <div id="slideshow" style="display: none"></div>
  23.         </div>
  24.       </div>
  25.     </div>
  26.   </div>


e questo css
Codice sorgente - presumibilmente Plain Text

  1. html {height: 100%;}
  2. body {padding: 10px; overflow: hidden; height: 100%}
  3. .fill {width: 100%; height: 100%;}
  4. .container-full {width: 100%; height: 100%;}
  5. #details {overflow: scroll;}


e anche questo Javascript per switchare le tab (credo che non c'entri niente, lo posto per completezza)
Codice sorgente - presumibilmente HTML / CSS

  1. $(".tabBtn").click(function(){
  2.     $("#tabs").children().removeClass("active");
  3.     $(this).addClass("active");
  4.     var panel = "#" + $(this).attr("id").slice(0, -3);
  5.     $("#tabContents > .tabActive").not(panel).fadeOut(500, function(){
  6.       $(panel).fadeIn(500);
  7.       $("#tabContents > .tabActive").removeClass("tabActive");
  8.       $(panel).addClass("tabActive");
  9.     });
  10.   });


Il risultato che ottengo è questo: http://i.imgur.com/P56ibUF.png, 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 il 21/07/2015 alle 16:51
PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 18:20
Martedì, 21/07/2015
Testo quotato

Postato originariamente da GN:
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.


Cosi, senza proprio guardare il codice, prova a visualizzarla in un browser. Si riscontrano differenze sostanziali tra le interpretazioni dei vari browser, basti pensare all'odio che generò IE a suo tempo per le stragrandi incompatibilità con gli altri browser. Tu prova, se continui a riscontrare il problema anche sui normali browser cercheremo un modo per risolverlo, ma in primis escludiamo la colpa dell'interprete.

PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 15:21
Mercoledì, 22/07/2015
Ciao e grazie per aver risposto, ho appena provato con Chrome ed Explorer ma purtroppo come immaginavo non c'è alcuna differenza.

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 17:12
Giovedì, 23/07/2015
Allora cosi funziona, ho però eliminato alcuni riferimenti al css di bootstarp, ma in qualche minuto protrai reintegrarlo facilmente credo.
Codice sorgente - presumibilmente HTML / CSS

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  5.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  7.         <style>
  8.                 html {height: 100%;}
  9.                 body {
  10.                         position:relative;
  11.                         padding-top: 25px;
  12.                         height: 100%;
  13.                 }
  14.                 body > * {
  15.                         margin-left: 25px;
  16.                         margin-right: 25px;
  17.                 }
  18.                 #container {
  19.                         position:absolute;
  20.                         top: 75px;
  21.                         left: 0;
  22.                         right: 0;
  23.                         bottom: 25px;
  24.                         border-radius: 4px;
  25.                         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  26.                 }
  27.                 #tabContents {
  28.                         position:absolute;
  29.                         overflow: auto;
  30.                         top: 0;
  31.                         left: 0;
  32.                         right: 0;
  33.                         bottom: 0;
  34.                         margin: 60px 10px 10px 10px;
  35.                 }
  36.         </style>
  37.     <script>
  38.         $(function() {
  39.     $(".tabBtn").click(function(){
  40.         $("#tabs").children().removeClass("active");
  41.         $(this).addClass("active");
  42.         var panel = "#" + $(this).attr("id").slice(0, -3);
  43.         $("#tabContents > .tabActive").not(panel).fadeOut(500, function(){
  44.           $(panel).fadeIn(500);
  45.           $("#tabContents > .tabActive").removeClass("tabActive");
  46.           $(panel).addClass("tabActive");
  47.         });
  48.       });
  49.          });
  50.         </script>
  51.   </head>
  52.   <body>
  53.         <div id="input" class="input-group">
  54.           <span class="input-group-addon">Images directory</span>
  55.           <input id="dir" type="text" class="form-control"/>
  56.           <span class="input-group-btn">
  57.             <button id="browseBtn" type="button" class="btn btn-default">Browse...</button>
  58.           </span>
  59.         </div>
  60.         <div id="container">
  61.           <div class="panel-body">
  62.             <ul id="tabs" class="nav nav-tabs">
  63.               <li id="detailsBtn" class="tabBtn active" role="presentation"><a href="#">Details</a></li>
  64.               <li id="thumbinalsBtn" class="tabBtn" role="presentation"><a href="#">Thumbinals</a></li>
  65.               <li id="slideshowBtn" class="tabBtn" role="presentation"><a href="#">Slideshow</a></li>
  66.             </ul>
  67.             <div id="tabContents">
  68.               <div id="details" class="tabActive">
  69.                 <ul id="detailsList">
  70.                         <li>elemento</li>
  71.                         <li>elemento</li>
  72.                         <li>elemento</li>
  73.                         <li>elemento</li>
  74.                         <li>elemento</li>
  75.                         <li>elemento</li>
  76.                         <li>elemento</li>
  77.                 </ul>
  78.               </div>
  79.               <div id="thumbinals"style="display: none"></div>
  80.               <div id="slideshow" style="display: none"></div>
  81.             </div>
  82.           </div>
  83.         </div>
  84.   </body>
  85. </html>



Facci sapere se puo andare.

PS Per il futuro; quando posti una pagina HTML evita i tagli ed inseriscila per intero, cosi semplifichi il lavoro a chi deve testarla.

PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 15:04
Lunedì, 27/07/2015
Scusa per il ritardo, grazie mille della risposta. Sembra funzionare ma purtroppo fino ad una certa risoluzione: se si ingrandisce la finestra, oltre una certa larghezza aumenta lo spazio bianco all'esterno del contenitore (come se avesse una larghezza massima), mentre avrei bisogno che riempisse tutto lo spazio disponibile lasciando solo un numero fisso di pochi pixel (10-20) di margine oltre il bordo. Comunque siccome non capisco bene alcune cose, penso che dovrò sistemarlo dopo un po' che avrò imparato ad usare il CSS decentemente. In ogni caso, grazie ancora.

Testo quotato

PS Per il futuro; quando posti una pagina HTML evita i tagli ed inseriscila per intero, cosi semplifichi il lavoro a chi deve testarla.


Ok lo terrò presente.

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 18:14
Lunedì, 27/07/2015
Mhh scusa, ma questo limite a quanto ammonterebbe come risoluzione? Io l'ho provato fino a 1920x1080 full screen e non ho notato questo problema. (allego screen)
In ogni caso nel codice non mi pare ci sia nulla che imponga questo limite.


Roby94 ha allegato un file: Immagine.jpg (67448 bytes)
Clicca qui per guardare l'immagine
PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 15:00
Martedì, 28/07/2015
Ops scusami era colpa mia: nella fretta non avevo provato il tuo codice direttamente ma solo dopo aver fatto alcune modifiche aggiungendo delle classi di bootstrap. Riprovando ho scoperto che il problema derivava dall'aggiunta della classe ".container" al div "#container" che credevo fosse necessaria per la classe ".panel" che aggiunge il bordo, ma invece non lo era (avevo capito male da un esempio della documentazione), quindi ho risolto togliendola. Ora funziona tutto alla perfezione.
Grazie ancora per l'aiuto :k:

PM Quote