2

Quando eu crio um Form usando JS para abrir ao click de um Button, o texto o Button é deformado.

#openSendForm{
    background: #0ebd64;
    position: absolute;
    width: 250px;
    height: 50px;
    right: 70px;
    top: 15px;
    text-align: center;
    font-size: 30px;
    font-family: "Futura";
}
<!DOCTYPE html>
<html>
    <head>
        <link href="StyleMain.css" rel="stylesheet" type="text/css"/>
        <title>Teste</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            
        $(function() {
            dialog = $("#teste1").dialog({
                autoOpen: false,
                height: 500,
                width: 500,
                modal: true,
                buttons: {
                  Ok: function() {
                    $(this).dialog( "close" );
                  }
                }
            });
          
            $("#openSendForm").button().on( "click", function() 
            {
                dialog.dialog( "open" );
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="openSendForm" value="Enviar Torrent">
        
        <div id="teste1">
            <input type="file" id="teste" value="Escolher Torrent">
            <input type="button" id="teste2" value="Enviar">
        </div>
    </body>
</html>

Quando eu não estou usando o botão para abrir o Form ele fica dessa forma($("")): inserir a descrição da imagem aqui

Porem quando eu uso ele para abrir o Form fica desta forma($("#openSendForm")): inserir a descrição da imagem aqui

8
  • Não compreendi exatamente a sua dúvida
    – LocalHost
    Commented 9/01/2017 às 18:57
  • Teu código ta funcionando normal, não entendi o erro também. EDIT: Você quer dizer que o estilo dos botões dentro do popup estão diferentes dos botões de fora? Commented 9/01/2017 às 18:59
  • @LocalHost Mude $("#openSendForm") para $("") e perceba a diferença no botão. Commented 9/01/2017 às 19:41
  • Percebi, mas ainda continuo sem entender o que quer realmente
    – LocalHost
    Commented 9/01/2017 às 19:47
  • @LocalHost Quero que o botão não fique bugado, eu não sei por que o texto vai pra baixo e ele perde as bordas, gostaria que ele continuasse normal. Entende ?? Commented 9/01/2017 às 19:48

2 Respostas 2

2

Isso acontece porque você estava definindo valor fixo para o tamanho: Use o padding que é uma margem para dentro, assim garante que fica de maneira igualitária o tamanho

#openSendForm{
    background: #0ebd64;
    position: absolute;
  
padding: 10px 30px;
    right: 70px;
    top: 15px;
    text-align: center;
    font-size: 30px;
    font-family: "Futura";
}
<!DOCTYPE html>
<html>
    <head>
        <link href="StyleMain.css" rel="stylesheet" type="text/css"/>
        <title>Teste</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            
        $(function() {
            dialog = $("#teste1").dialog({
                autoOpen: false,
                height: 500,
                width: 500,
                modal: true,
                buttons: {
                  Ok: function() {
                    $(this).dialog( "close" );
                  }
                }
            });
          
            $("#openSendForm").button().on( "click", function() 
            {
                dialog.dialog( "open" );
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="openSendForm" value="Enviar Torrent">
        
        <div id="teste1">
            <input type="file" id="teste" value="Escolher Torrent">
            <input type="button" id="teste2" value="Enviar">
        </div>
    </body>
</html>

1
  • Sim, funcionou perfeitamente. Commented 9/01/2017 às 23:14
1

<!DOCTYPE html>
<html>
	<head>
		<link href="StyleMain.css" rel="stylesheet" type="text/css"/>
		<title>Teste</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<link rel="stylesheet" href="/resources/demos/style.css">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script>
			
		$(function() {
			dialog = $("#teste1").dialog({
				autoOpen: false,
				height: 500,
				width: 500,
				modal: true,
				buttons: {
				  Ok: function() {
					$(this).dialog( "close" );
				  }
				}
			});
		  
			$("#openSendForm").button().on( "click", function() 
			{
				dialog.dialog( "open" );
			});
		});
		</script>
	</head>
	<body>
		<input type="button" id="openSendForm" value="Enviar Torrent">
		
		<div id="teste1" title="Escolha o Torrent">
		
			<input type="file" id="teste" value="Escolher Torrent"  class="ui-button ui-corner-all ui-widget"><br><br>
			<input type="button" id="teste2" value="Enviar"  class="ui-button ui-corner-all ui-widget"> 
		</div>
	</body>
</html>

Para customizar botão input file, siga esse link: https://jsfiddle.net/xnVHr/70/

1
  • Olá, eu editei a pergunta, após ver seu código lembrei que me esqueci de colocar o CSS junto a pergunta. Commented 9/01/2017 às 22:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .