Button disabled when not in "mobile resolution"

Asked

Viewed 153 times

1

Good morning, you guys!

I’m a beginner in jQuery and Bootstrap, and I’m having a hard time using both simultaneously.

I am wanting to generate a button that, when clicking, displays a small form for inserting email. However, it is only working when the window is in mobile size (smaller than 768px), in larger resolutions, the button is disabled and the code does not work.

Here’s my shorthand code:

[...]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nome da Página</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(window).load(function(){
            $('#toggle-form-acesso').click(form_toggle);
            $('#form-acesso').hide();
        });

        function form_toggle(){
            $("#form-acesso").toggle('swing');
        }
    </script>
</head>

<body>
[...]
<div id="apresentacao" class="col-sm-8 col-sm-offset-4">
    <button type="button" id="toggle-form-acesso">Cadastrar e-mail</button>
        <form id="form-acesso" action="" method="post">
            <label>E-mail:</label>
            <input class="field-text" type="text" name="email" id="email" placeholder="[email protected]" required/>
            <input class="botao-login" type="submit" value="Solicitar acesso" />                
        </form>
[...]

Did I do something wrong? Does anyone know what might be going on?

Thank you very much! D

jquery html bootstrap

  • In the presentation div, you only used the parameters of class col-Sm, already tried to do for everyone, like the example would be class="col-Xs-6 col-Sm-6 col-Md-6 col-lg6" Being the XS responsible for formats in mobile with small resolution. I recommend reading this one: http://webdevacademy.com.br/tutorials/ux/bootstrap-3-layouts-sistema-grids/

  • Can you show the full code ? I did not identify the error only with snippets.

1 answer

0

What seems to be wrong, is that you have not put a control class for bootstrap Forms, usually you can use the class. form-group to work with Forms.

Here I added the classes, try using them in your code and see if in your context they will work.

   <div id="apresentacao" class="form-group col-sm-8 col-sm-offset-4">
    <button class="btn btn-primary" type="button" id="toggle-form-acesso">Cadastrar e-mail</button>
    <form class="form-group" id="form-acesso" action="#" method="post" >
        <label for="email">E-mail:</label>
        <input class="field-text form-control" type="text" name="email" id="email" placeholder="[email protected]" required/>
        <input class="botao-login btn btn-success form-control" type="submit" value="Solicitar acesso" />                
    </form>
</div>

I have separated the code that you put in your example and it does not present disable in smaller resolutions that you mentioned, becoming normal.

In this link the bootstrap itself warns you about the control of the class with the inline form title to work with fields next to each other and in it there is a notice about the resolution of 768px, of a read and see if any chunk above your code exists or is missing something to work properly. http://getbootstrap.com/css/#Forms

Browser other questions tagged jquery html bootstrap

You are not signed in. Login or sign up in order to post.