Skeleton CSS: place button after input tag-CodePudding

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 >
  <div >
    <div >
      <form action="/clock" method="post">
        <h4>Clock setup</h4>
        <label for="datetime">Set datetime</label>
        <div >
          <input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
          <button type="button"  onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
        </div>
        <input  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.

CodePudding user response：

I added 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.

    <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 >
      <div >
        <div >
          <form action="/clock" method="post">
            <h4>Clock setup</h4>
            <label for="datetime">Set datetime</label>
            <div >
              <input  style="width: calc(100% - 98px)" type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
              <button type="button"  onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
            </div>
            <input  type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>

CodePudding user response：

The problem is due to the one-half class. 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:

<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 >
  <div >
    <form action="/clock" method="post">
      <h4>Clock setup</h4>
      <label for="datetime">Set datetime</label>
      <div >
        <input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
        <button type="button" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
      </div>
      <input  type="submit" value="Submit">
    </form>
  </div>
</div>