wie bekomme ich in google Docks Tabelle zwei button mit abstand nebneinander?
Hallo in die Runde und schon mal vielen Dank im Voraus in die Runde!
Ich bin noch blutiger Anfänger und fange gerade an mich mit dem HTML zu beschäftigen. Wie schon im Fragetitel beschrieben versuche ich zwei Buttons mit Abstand nebeneinander zu bekommen, aber es gelingt mir nicht so recht. Daher setze ich mal das, was ich habe, hier rein. Ich würde mich über jeden lehrreichen Tipp sehr freuen, um meinen Horizont in diesem Bereich zu erweitern
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
form {
background-color: #fff;
width: 250px;
padding: 10px;
border-radius: 20px;
box-shadow: 0px 0px rgba(1,2,0.1);
margin
width:auto !important;
}
label {
font-weight: bold;
text-transform: uppercase;
}
input[type="text"] {
width: 250px;
padding: 20px;
margin-bottom: 9px;
border: 1px outset #FF0000;
border-radius: 10px;
box-sizing: border-box;
}
input[type="button"] {
display: block;
margin: 0 auto 12px auto;
cursor: pointer;
width: 190px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"] {
display: block;
margin: 0 auto 7px auto;
cursor: pointer;
width: 140px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"]:hover {
background-color: #19911b;
}
input[type="button"]:hover {
background-color: #19911b;
}
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>
</html>
1 Antwort
Ich würde es mit CSS Flexbox versuchen.
Hier zum nachlesen: https://www.w3schools.com/css/css3_flexbox.asp
Ich habe an deinem Beispielcode weitere Änderungen vorgenommen (wie die form width damit die buttons nebeneinander Platz haben).
Hoffe das hilft und funktioniert auch in Google Tables ^^
Bei mir sieht das ganze jetzt so aus:
Hier der Code:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
form {
background-color: #fff;
width: 350px;
padding: 10px;
border-radius: 20px;
box-shadow: 0px 0px rgba(1,2,0.1);
margin
width:auto !important;
}
label {
font-weight: bold;
text-transform: uppercase;
}
input[type="text"] {
width: 350px;
padding: 20px;
margin-bottom: 9px;
border: 1px outset #FF0000;
border-radius: 10px;
box-sizing: border-box;
}
input[type="button"] {
display: block;
margin: 0 auto 7px auto;
cursor: pointer;
width: 190px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"] {
display: block;
margin: 0 auto 7px auto;
cursor: pointer;
width: 140px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"]:hover {
background-color: #19911b;
}
input[type="button"]:hover {
background-color: #19911b;
}
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<div style="display: flex">
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</div>
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>
Woher ich das weiß:Recherche
Danke Nurax03 für deine hielfe, das hat mir sehr geholfen. Nur die grafische Darstellung muss ich noch anpassen da die Buttons zu breit sind für die Flex box