I’m using Skeleton CSS for my simple embedded web server.
I have a problem to place a button in the same line / row as an input tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div class="row">
<div class="one-half column">
<form action="/clock" method="post">
<h4>Clock setup</h4>
<label for="datetime">Set datetime</label>
<div class="u-full-width">
<input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
<button type="button" class="u-pull-right" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
</div>
<input class="button-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>I don’t understand why the "Now" button is placed on the next row, after the submit button.
Removing the u-pull-right class or the u-full-width one changes nothing.
I’m using Firefox 101 under Linux Ubuntu 22.04.
2
Answers
The problem is due to the
one-halfclass. Given the different media queries it happens that for some browser widths the half column is too short for both items (even if it does not seem so visually).For this specific form the solution is to rely on a full-width column:
I added
class="u-pull-left" style="width: calc(100% - 98px)"following code to input and it button came along with it. It was not coming inline because input was having fullspace for itself and was pushing the button to another row and I just provided some space for the button to come along by adding u-pull-left class and reducing some width from total width.