Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913

    Stile che cambia quando ricarico la pagina

    Sto creando un piccolo form dropdown (cosa che prima non mi ha mai dato problemi), ma... il menu cambia posizione a ogni cambio pagina, alternandosi tra queste due:

    [Risultato giusto]
    ok.JPG
    [Risultato sbagliato]
    ko.JPG

    Credo sia colpa del form perché quando tolgo il secondo input dal codice, il risultato sbagliato non si presenta...

    (L'errore è in chrome, in firefox funziona tutto correttamente...)

    Ecco il codice:

    codice HTML:
    <ul class="menu transition-children-all">
        <li class="dropdown">
            <a href="/login">{{_("Login")}}</a>
            <form action="/login" method="post" class="dropdown-menu">
                <div class="input-group-sm">
                    <div class="add-on-active">@</div>
                    <input type="email" name="email" placeholder="{{_('Email')}}">
                </div>
                <div class="input-group-sm">
                    <div class="add-on-active">@</div>
                    <input type="password" name="password" placeholder="Password">
                </div>
            </form>
        </li>
        <li>
            <a href="/registration">{{_("Registration")}}</a>
        </li>
    </ul>
    Chiedo scusa se il css è lunghissimo, se preferite chiedetelo e vi posto il codice scss che lo genera
    codice:
    body header nav ul.menu {
      display: inline-block;
      float: right;
      font-size: 14px;
      height: 100%;
    }
    body header nav ul.menu > li {
      float: left;
      height: 100%;
      vertical-align: middle;
    }
    body header nav ul.menu > li.dropdown {
      position: relative;
    }
    body header nav ul.menu > li.dropdown > .dropdown-menu {
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-color: #e7e7e7;
      border-style: solid;
      border-width: 1px;
      display: none;
      opacity: 0;
      padding: 15px;
      position: absolute;
      right: 0px;
    }
    body header nav ul.menu > li.dropdown:hover > .dropdown-menu {
      background-color: #f8f8f8;
      display: block;
      opacity: 1;
    }
    body header nav ul.menu > li > a {
      display: block;
      height: 100%;
      line-height: 20px;
      padding: 15px;
    }
    body header nav ul.menu > li > a:hover {
      background-color: #e6e6e6;
    }
    body header nav ul.menu li {
      display: block;
    }
    codice:
    .transition, .transition-children > *, .transition-children-all * {
      -moz-transition-property: all;
      -o-transition-property: all;
      -webkit-transition-property: all;
      transition-property: all;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;
    }
    
    
    form button {
      cursor: pointer;
      outline: none;
    }
    form input {
      outline: none;
    }
    form input:focus {
      -moz-box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
      -webkit-box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    form input[type="search"]::-webkit-search-cancel-button {
      -moz-appearance: none;
      -webkit-appearance: none;
    }
    form .input-group, form .input-group-sm, form .input-group-lg {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border-collapse: separate;
      border-color: #ccc;
      border-style: solid;
      border-width: 1px;
      display: table;
      font-size: 14px;
      margin: 10px;
      position: relative;
    }
    form .input-group.inline, form .inline.input-group-sm, form .inline.input-group-lg {
      display: inline-table;
      vertical-align: middle;
    }
    form .input-group > *, form .input-group-sm > *, form .input-group-lg > * {
      background-color: white;
      border-width: 0px;
      display: table-cell;
      height: 32px;
      margin: 0px;
      padding: 5px 10px;
      position: relative;
      vertical-align: middle;
      z-index: 2;
    }
    form .input-group > *:first-child, form .input-group-sm > *:first-child, form .input-group-lg > *:first-child, form .input-group > *:first-child.add-on > button, form .input-group-sm > *:first-child.add-on > button, form .input-group-lg > *:first-child.add-on > button, form .input-group > *.add-on-active:first-child > button, form .input-group-sm > *.add-on-active:first-child > button, form .input-group-lg > *.add-on-active:first-child > button {
      -moz-border-radius-topleft: 3px;
      -webkit-border-top-left-radius: 3px;
      border-top-left-radius: 3px;
      -moz-border-radius-bottomleft: 3px;
      -webkit-border-bottom-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    form .input-group > *:last-child, form .input-group-sm > *:last-child, form .input-group-lg > *:last-child, form .input-group > *:last-child.add-on > button, form .input-group-sm > *:last-child.add-on > button, form .input-group-lg > *:last-child.add-on > button, form .input-group > *.add-on-active:last-child > button, form .input-group-sm > *.add-on-active:last-child > button, form .input-group-lg > *.add-on-active:last-child > button {
      -moz-border-radius-topright: 3px;
      -webkit-border-top-right-radius: 3px;
      border-top-right-radius: 3px;
      -moz-border-radius-bottomright: 3px;
      -webkit-border-bottom-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    form .input-group > *.add-on, form .input-group-sm > *.add-on, form .input-group-lg > *.add-on, form .input-group > *.add-on-active, form .input-group-sm > *.add-on-active, form .input-group-lg > *.add-on-active {
      font-size: 14px;
      min-width: 32px;
      padding: 6px 12px;
      z-index: 1;
    }
    form .input-group > *.add-on.clickable, form .input-group-sm > *.add-on.clickable, form .input-group-lg > *.add-on.clickable, form .input-group > *.add-on.hoverable:hover, form .input-group-sm > *.add-on.hoverable:hover, form .input-group-lg > *.add-on.hoverable:hover, form .input-group > *.hoverable.add-on-active:hover, form .input-group-sm > *.hoverable.add-on-active:hover, form .input-group-lg > *.hoverable.add-on-active:hover, form .input-group > *.clickable.add-on-active, form .input-group-sm > *.clickable.add-on-active, form .input-group-lg > *.clickable.add-on-active {
      cursor: pointer;
    }
    form .input-group > *.add-on.hoverable:hover, form .input-group-sm > *.add-on.hoverable:hover, form .input-group-lg > *.add-on.hoverable:hover, form .input-group > *.hoverable.add-on-active:hover, form .input-group-sm > *.hoverable.add-on-active:hover, form .input-group-lg > *.hoverable.add-on-active:hover {
      background-color: #e6e6e6;
    }
    form .input-group > *.add-on-active, form .input-group-sm > *.add-on-active, form .input-group-lg > *.add-on-active {
      background-color: #e6e6e6;
    }
    form .input-group-sm {
      font-size: 12px;
    }
    form .input-group-sm > * {
      height: 28px;
    }
    form .input-group-sm > *.add-on, form .input-group-sm > *.add-on-active {
      min-width: 28px;
    }
    form .input-group-lg {
      font-size: 18px;
    }
    form .input-group-lg > * {
      height: 44px;
    }
    form .input-group-lg > *.add-on, form .input-group-lg > *.add-on-active {
      min-width: 44px;
    }
    Inoltre cancellando il secondo input dal codice o cambiandone l'attributo type (anche se non ho assegnato nessuno stile in base a questo) html il problema non si presenta.
    No

  2. #2
    ho provato a copiarmi il tuo codice in un foglio blocco note ma non ho il tuo esempio, puoi allegare un link con la pagina o un altro modo per poterla visualizzare? se no non riesco ad aiutarti

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    buytime.lc_files.zip

    Questo zip contiene il file html e css che danno il problema...
    Ho notato che, dalla console di chrome, togliendo e poi rimettendo il float:right dal ul.menu va a posto...

    Edit
    Ho momentaneamente risolto con un margin-top di -50px, ma mi piacerebbe sapere dov'è il problema...
    Ultima modifica di tampertools; 30-09-2014 a 20:04
    No

  4. #4
    ho provato il tuo file ma lo vedo giusto
    Immagine.png

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    Con che browser?

    (E in effetti il problema non c'è sempre, ad esempio se copio il mio html e css in jsfiddle è tutto ok)

    Edit
    Ho risolto, credo fosse un problema di cache di sass... infatti l'errore ho visto che si presenta solo dopo che ricarico la pagina dopo aver ricompilato i file di stile
    Ultima modifica di tampertools; 30-09-2014 a 20:56
    No

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.