[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