When I create a Form deforms the Button

Asked

Viewed 52 times

2

When I create a Form using JS to open at the click of a Button, the text the Button is warped.

#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>

When I’m not using the button to open the Form it looks like this($("")): inserir a descrição da imagem aqui

But when I use it to open the Form it looks like this($("#openSendForm")): inserir a descrição da imagem aqui

javascript form

  • I didn’t quite understand your doubt

  • Your code is working normal, I don’t understand the error either. EDIT: You mean that the style of the buttons inside the popup are different from the buttons outside?

  • @Localhost Mude $("#openSendForm") for $("") and notice the difference in the button.

  • I get it, but I still don’t understand what you really want

  • @Localhost I want the button not to be bugged, I do not know why the text goes down and it loses the edges, I would like it to remain normal. Understands ??

  • @Localhost Hello, I edited the question, after seeing your code I remembered that I forgot to put the CSS together the question.

  • How would you like it to look? You’re talking that the text of the button is way down?

  • @Localhost I put in question the difference.

Show 3 more comments

2 answers

2


This is because you were setting fixed value for the size: Use the padding which is a margin inward, thus ensures that the size is equal

#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>

  • Yes, it worked perfectly.

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>

To customize input file button, follow this link: https://jsfiddle.net/xnVHr/70/

  • Hello, I edited the question, after seeing your code I remembered that I forgot to put the CSS together the question.

Browser other questions tagged javascript form

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