Button disabled when not in "mobile resolution"

Question

Button disabled when not in "mobile resolution"

Navigation

#1 by (0 votes)

1

Good morning everyone!

I'm a beginner in jQuery and Bootstrap, and I'm having some difficulty using both simultaneously.

I'm trying 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), at higher resolutions, the button is disabled and the code does not work.

Here is my short 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 happening?

Thank you very much! : D

html jquery bootstrap

asked by anonymous 14.07.2016 / 14:22

1 answer

Error installing package ffvideo python Color in Visual Studio

score 0 · Answer 1

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

Here I added the classes, try to use them in your code and see if in their 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 separated the code that you put in your example and it does not show the disable in smaller resolutions that you mentioned, becoming normal.

In this link the bootstrap itself tells you about the control of the class with the title of inline form to work with fields next to each other and in it there is a warning about the resolution of 768px, of a read and see if some piece above of your code exists or something is missing to work correctly. link