@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/2808276...@github.com>_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
