When I create a Form, it deforms the Button

Question

When I create a Form, it deforms the Button

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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

#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><scriptsrc="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 ( $("") ):

ButwhenIuseittoopentheFormitlookslikethis($("#openSendForm") ):

javascript forms

asked by anonymous 09.01.2017 / 19:55

2 answers

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><scriptsrc="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 the input file button, follow this link: link

09.01.2017 / 22:42

Update ListView after return with PopAsync in Xamarin Forms GPing should be called as first argument

score 2 · Accepted Answer

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

#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><scriptsrc="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>