Framework Foundation, problemas com Forms dentro de uma Topbar

Home Fórum Desenvolvimento Frameworks Framework Foundation, problemas com Forms dentro de uma Topbar

Este tópico contém respostas, possui 2 vozes e foi atualizado pela última vez por  felipemantoan 2 anos, 4 meses atrás.

Visualizando 4 posts - 1 até 4 (de 4 do total)
  • Autor
    Posts
  • #16676

    acca90
    Participante

    Olá, vi a vídeo aula sobre foundation e decidi testar em uma aplicação, porém já de inicio encontrei um problema,
    quando tento colocar um input text dentro da topbar usando o mesmo código do exemplo retirado a documentação,
    este fica desalinhado, diferente de todos os exemplos que eu vi do mesmo tipo.. segue o resultado:

    Screen

    o código que eu escrevi foi:

    
    <!DOCTYPE html>
    <!--[if IE 9]><html class="lt-ie10" lang="pt-br" > <![endif]-->
    <html class="no-js" lang="pt-br" >
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/foundation.css">
            <link rel="stylesheet" href="css/app.css">
    
            <script src="js/vendor/modernizr.js"></script>
    
        </head>
        <body>
    
            <div class="contain-to-grid sticky">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class='name'><h1><a href="">Matheus</a></h1></li>
                    </ul>
    
                    <section class="top-bar-section">
    
                        <ul class="right">
                            <li class="has-form">
                                <div class="row collapse">
                                    <div class="large-8 small-9 columns">
                                        <input type="text" placeholder="Find Stuff">
                                    </div>
                                    <div class="large-4 small-3 columns">
                                        <a href="#" class="button expand">Search</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
    
                    </section>
                </nav>    
            </div>
    
            <script src="js/vendor/jquery.js"></script>
            <script src="js/foundation/foundation.js"></script>
            <script src="js/foundation/foundation.topbar.js"></script>       
            <script>
                $(document).foundation();
            </script>
        </body>
    </html>
    
    #16678

    felipemantoan
    Moderador

    simples acrescente ao botão de pesquisa a classe postfix

    #16679

    acca90
    Participante

    Na verdade isso fixou o button e o input no mesmo tamanho, ok… mas eles ficaram demasiado grandes, colados na linha inferior da topbar. O que eu gostaria é que o input tivesse o seu tamanho reduzido para se alinhar ao botão, como acontece no exemplo da documentação http://foundation.zurb.com/docs/components/topbar.html

    #16680

    felipemantoan
    Moderador

    logo use a classe medium no input e remova postfix

                        <ul class="right">
                            <li class="has-form">
                                <div class="row collapse">
                                    <div class="large-8 small-9 columns">
                                        <input type="text medium" placeholder="Find Stuff">
                                    </div>
                                    <div class="large-4 small-3 columns">
                                        <a href="#" class="button expand">Search</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
    
Visualizando 4 posts - 1 até 4 (de 4 do total)

Você deve fazer login para responder a este tópico.