[openstreetmap/openstreetmap-website] Hide routing submit button (PR #5960)

Marwin Hochfelsner notifications at github.com
Wed Apr 30 19:57:23 UTC 2025


@hlfan commented on this pull request.



> +.directions_form {
+  div {
+    align-items: center;
+    grid-template-columns: 1fr auto;
+  }
+}
+

I've tried to build this grid layout with display flex (in the `d-flex` and `row`/`col` flavours).
In neither can I get the close button to be in just the right place, aligned with the horizontal center of the mode and provider selectors, _and_ the vertical center of the reverse directions button and the submit button when focused.

While I've gotten it working in an HTML table (Bootstrap `.table` messed up too much), that feels like the wrong direction to move markup-wise. And the markup is quite clunky:
```html
<table class="w-100">
	<tr>
		<td class="pb-1 pe-1">
			<div class="align-items-center d-flex gap-2">
				<div class="btn-group routing_modes" role="group">...</div>
				<select class="..." name="routing_engines">...</select>
			</div>
		</td>
		<td class="pb-1">
			<div class="align-items-center d-flex flex-column gap-2">
				<button type="button" class="btn-close p-2 rounded-5" aria-label="Close"/>
			</div>
		</td>
	</tr>
	<tr>
		<td class="pe-1">
			<div class="d-flex flex-column gap-1">
				<div class="align-items-center d-flex">...</div>
				<div class="align-items-center d-flex">...</div>
			</div>
		</td>
		<td class="col-1">
			<div class="align-items-center d-flex flex-column gap-2">
				<button type="button" class="..." title="Reverse Directions">...</button>
				<input type="submit" name="commit" value="Go" class="...">
			</div>
		</td>
	</tr>
</table>
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5960#discussion_r2069357067
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5960/review/2808276323 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250430/9abbc82c/attachment-0001.htm>


More information about the rails-dev mailing list