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 - Problema impaginazione e gestione del widget Accordion di jQuery UI
Forum - HTML / CSS - Problema impaginazione e gestione del widget Accordion di jQuery UI

Avatar
a_butta (Member)
Expert


Messaggi: 578
Iscritto: 16/03/2010

Segnala al moderatore
Postato alle 16:09
Domenica, 02/12/2012
Ciao a tutti.
Poichè il mio problema riguarda un po' tutto tra javascript, css e html, scrivo in questa sezione sperando di non sbagliare.

Nel mio sito ho bisogno di creare una sorta di bacheca per le comunicazioni.
Ogni item della bacheca sarà composto da Titolo, mittente, data, testo del messaggio
Utilizzo un Accordio di jQuery UI per gestire ogni comunicazione, e ho fatto in modo che Titolo, mittente e data siano tutti visualizzati nell'header dell'accordion, mentre il testo farà parte del contenuto.

Nella pagina html ho prodotto questo risultato:

Codice sorgente - presumibilmente HTML

  1. <div id="group_com">
  2.         <!-- INIZIO BACHECA -->
  3.        
  4.                 <!--  INIZIO ACCORDION HEADER -->
  5.                 <div class="accordion-header">
  6.                         <h3 class="header-titolo" name="15" >
  7.                                 <a name="15"></a>
  8.                                 <span class="titolo-com">Testo di prova</span>
  9.                         </h3>
  10.                                 <span class="data" title="Data pubblicazione messaggio">
  11.                                         <strong>02-12-2012</strong>
  12.                                 </span>
  13.                                 <br />
  14.                                 <span class="mittente" title="Autore del messaggio">
  15.                                         <strong>Prova prova</strong>
  16.                                 </span>
  17.                 </div>
  18.                 <!-- FINE ACCORDION HEADER -->
  19.                
  20.                 <!-- INIZIO ACCORDION CONTENT -->
  21.                 <div class="accordion-content">
  22.                         <p>
  23.                                 Testo del messaggio
  24.                                 <br />
  25.                 <input title="Elimina questo messaggio" type="submit" value="" name="elimina_" class="elimina" />
  26.       </p>
  27.     </div>
  28.     <!-- FINE ACCORDION CONTENT -->
  29.    
  30.     <!-- STESSA IDENTICA SINTASSI PER LE ALTRE COMUNICAZIONI -->
  31.    
  32.   <!-- Fine Bacheca -->
  33.   </div>



ho utilizzato il seguente CSS per la gestione dei vari titolo, date, ecc....:
Codice sorgente - presumibilmente Plain Text

  1. .data, .mittente {
  2.         display: block;
  3.         position: relative;
  4.         float: right;
  5.         top: -10px;
  6.         color: grey;
  7.         font-weight: bold;
  8.         font-size: 12px;
  9. }
  10.  
  11. .titolo-com {
  12.         color: blue;
  13.         font-weight: bold;
  14. }
  15.  
  16. .header-titolo {
  17.         display: block;
  18.         width: 80%;
  19. }
  20. .accordion-content {
  21.         display: block;
  22. }



I problemi che riscontro sono due:

1) Il titolo è al di sopra dell'icona quando dovrebbe essere centrato (Non molto importante)
2) Il riquadro del contenuto dell'accordion è tagliato a metà dell'intero div (lo potete vedere nell'immagine allegata)!! Molto Importante

In javascript per far partire l'accordion ho il seguente codice:
Codice sorgente - presumibilmente HTML / CSS

  1. var icons = {
  2.    header: "ui-icon-circle-arrow-e",
  3.    activeHeader: "ui-icon-circle-arrow-s"
  4. };
  5. $('#group_com').accordion({
  6.    header: "div.accordion-header",
  7.    collapsible: true,
  8.    icons: icons,
  9.    active: index  // me lo sono calcolato altrove
  10. });



Allego l'immagine del risultato finale.

Non riesco a capire da cosa dipenda quell'errore :noway:

Spero di essere stato chiaro e vi ringrazio anticipatamente.


a_butta ha allegato un file: accordion.PNG (6017 bytes)
Clicca qui per guardare l'immagine
PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 16:41
Domenica, 02/12/2012
Cosi ad occhio non è facile determinare da cosa dipenda l'errore. Impostare semplicemente la larghezza a 100%? Se no non avresti una pagina di esempio, ci semplifichi di molto il lavoro.

PM Quote