Custom Floating HTML prompt button spacing

Questions & Suggestions
1

How to add spacing between buttons with css?

2

Margins, padding, dividers, flex, transparent image (if you don't want to go the CSS route), and probably many more ways depending on what you are trying to achieve. Some sample HTML and a more complete description of what you want would help.

Did you try putting that exact phrase into your favourite search engine?

3

Thought there might be a simple solution. Let this 'problem' rest for now. I'll stick with the 'Prompt For User Input Action' for now. Thanks for the answer.

4

LLMs have their issues, for sure, but you can often get very good results if you ask them to build HTML and CSS for you. Just make sure you describe the exact thing you want in as much detail as possible.

See this thread for some examples:

-rob.

1 Like
5

I highly recommend using ChatGPT or something similar. Here's a link to one of my ChatGPT successes:

6

It's probably more helpful to ask how to position buttons. As Nige_S points out CSS offers many ways. "Spacing" is what's left when you position the buttons so it isn't directly controlled.

My Custom HTML prompts (see Mirror Mirror here) sometimes use simple CSS positioning commands that don't require full-flown CSS, just a style command in HTML.

7

There will be. But first you have to define the problem (and the same will be true if you decide to ask ChatGPT or similar the question).

How many buttons are there? Are they horizontally or vertically stacked? Do you want extra space just between the buttons or also between them and any preceding/succeeding elements? Is the spacing to be constant or vary with window sizing? Are you after alignment and/or distribution rather than spacing? Etc, etc, etc.

Again, some sample HTML and a more complete description of what you want would help.

1 Like
8

Here is my sample HTML:

<!DOCTYPE html>
<html lang="en">
   <head>
<style type="text/css">

.buttons {
	clear: both;
	height: 28px;
	width: 100%;
	padding-top: 15px;
	text-align: center;
}
</style>
<script type="text/javascript">
	function KMWindow() {
		  var savedPosition = window.KeyboardMaestro.GetVariable("SaveWindowPosition");
		 if (!savedPosition)
			  savedPosition = "420, 200";
		 return `${savedPosition}, 420, 500`;
	
	}		 
	function saveWindowPosition() {
		 var x = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Left)"));

		 var y = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Top)")) + 16;
		 window.KeyboardMaestro.SetVariable("SaveWindowPosition", `${x}, ${y}`);
	}	
	function submitWindow(result) {
		 saveWindowPosition();
		 window.KeyboardMaestro.Submit(result);
	}	
	function cancelWindow(result) {
		 saveWindowPosition();
		 window.KeyboardMaestro.Cancel(result);
	}
function cancelWindow(repeat) {
		 saveWindowPosition();
		 window.KeyboardMaestro.Cancel(result);
	}
</script>
</head>
<body>



	<div class="buttons" >
		<button name="Cancel" type="button"						name="Cancel"onclick="window.KeyboardMaestro.Cancel('')">Cancel</button>
		<button name="OK" type="button" autofocus 				onclick="submitWindow('OK')">OK</button>
	</div>

   </form>
   </body>
</html>

My goal is to have more space between the 'Cancel' and 'OK' buttons

9

Easiest is to whack in a margin to the right of the left button and the left of the right button. This will do 20 pixels for each, for a 40 pixel gap:

	<div class="buttons" >
		<button name="Cancel" type="button" name="Cancel" onclick="window.KeyboardMaestro.Cancel('')" style='margin-right:20px'>Cancel</button>
		<button name="OK" type="button" autofocus onclick="submitWindow('OK')" style='margin-left:20px'>OK</button>
	</div>

You could, of course, do similar in your head's style sheet instead:

button {
	margin: 0px 20px;
}

...but that'll apply 20px to the left and right of both buttons. If you want more control, make a class for each and add styles for those classes.