Utilizing Skeleton CSS to position a button directly following an input element

Utilizing Skeleton CSS for my basic embedded web server. I'm facing an issue with aligning a button in the same line 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>

The placement of the "Now" button on a separate row after the submit button is puzzling me. Even eliminating the u-pull-right class or the u-full-width doesn't make any difference.

This dilemma is occurring on Firefox 101 running on Linux Ubuntu 22.04.

htmlcssformsskeleton-css-boilerplate

Answer №1

The issue stems from the one-half class. Due to various media queries, there are instances where the half column is not long enough for both elements, even though it may appear visually sufficient.

In this particular scenario, the solution is to utilize 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 class="container">
  <div class="row">
    <form action="/clock" method="post">
      <h4>Clock setup</h4>
      <label for="datetime">Set datetime</label>
      <div class="row">
        <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 class="button-primary" type="submit" value="Submit">
    </form>
  </div>
</div>

Answer №2

By adding the code 

class="u-pull-left" style="width: calc(100% - 98px)"
to the input, I was able to bring the button inline with it. Previously, the button was being pushed to a new row because the input had full space to itself. Adding the u-pull-left class and reducing some width allowed the button to align properly.

<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 class="u-pull-left" style="width: calc(100% - 98px)" 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Java html code failing to load image

I need help with the following HTML code that is supposed to display different images based on the user's location. If the user is from the US, a US image should load, and if the user is from Japan, a Japan image should load. <body> <div cla ...

javahtmlservlets

Having trouble retrieving the value from the input DOM element

Below is the html and JS code that I am working with: function controller() { document.write(document.getElementById("name").value) ; document.write(document.getElementById("id").value) ; } <input type="text" id= ...

javascripthtmldominput

Trouble retrieving key value in HTML with Angular and Firebase

When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...

htmlangularfirebase-realtime-databaseangularfire2

What is the best way to update the color of a header in an HTML document

My HTML and CSS code is causing the h1 title to appear in blue instead of red. I am unsure why this is happening and how to fix it. Any help would be greatly appreciated. <!doctype html> <h1>les planètes du système solaire <h1> < ...

htmlcsshtml5-canvas

What is the best way to extract the ID from a dynamic "ul" tag?

Let me explain the scenario I'm facing. Currently, I have a button in my HTML code that triggers a function to generate content from another button upon selection. In the HTML code, there is a ul tag containing li tags which are populated dynamically ...

javascripthtmlajax

The challenge of incorporating various JavaScript formats into one cohesive system

I am encountering an issue with using two different forms - one for retrieving radio button selections and the other as a submission form. The problem is, I am unable to use both forms' actions simultaneously. <table id="newImageTable" border="1" ...

javascripthtmlajaxforms

What is the process for verifying which classes have been assigned to a specific component?

I am working with a Vue component and I would like to determine, from within the component itself, which classes have been applied to it. Is there a way to accomplish this? Currently, I am using a workaround where I pass the class as a prop: <my-comp ...

cssvue.jsvue-component

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Strategies for populating an empty JavaScript array with search results obtained from a PHP form submission

Blank Array: <script type="text/javascript"> var itemList=[]; </script> PHP Form: <form id="itemForm" action="" method="POST"> <div class=".col-md-6"> <div id="scrollable-dropdown-menu"> <input class="typeahead" ...

javascriptphphtml

creating a webpage with jQuery UI tabs and a side navigation bar

I've been working on creating a menu tab with a navigation bar on the same page within a web form using asp.net C#. The "Home" tab works fine, but I'm having trouble with the "Study Setup" tab. Here is the HTML code from the content page where th ...

javascriptc#jqueryhtmlcss

My JavaScript doesn't seem to be functioning, as there are no visible errors detected in the debugger

I am encountering an issue with my HTML file that utilizes the randomNumber() JavaScript function upon page load. Initially, I tested the JavaScript code by setting the number variable to be alerted upon page load as a test, and the Math.random function wo ...

javascripthtml

Tips for creating a navigation system that combines both horizontal and vertical bars

Is there a way for me to have both horizontal and vertical navigation bars on my website? I am new to design and struggling to understand why my CSS isn't working properly when applied to multiple links. <body> <div class="horizontallinks" ...

htmlcss

What is the process of permanently modifying an HTML document using JavaScript?

I'm interested in creating a basic comment section using JavaScript. Here is the structure of the form : <form> <textarea cols="50" rows="10" placeholder="Share your thoughts ..." id="theComment"></textarea><br/> < ...

phpjavascripthtmlmysql

Incorrect column alignment in Tailwind CSS

I am working on a straightforward flexbox layout with a two-column grid setup. <div class="flex relative"> <div class="columns-2 gap-4 space-y-4"> <div class="bg-red-500 p-10">1</di ...

csstailwind-css

JavaScript code is not functioning properly on Internet Explorer 10

Upon selecting an option, I need to activate buttons. This functionality works smoothly in all browsers except for IE10. The HTML for the select element: <select id="tenants" name="tenants" size="10" class="reportOption" onchange=""> <option va ...

javascriptjqueryhtml

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

phpjavascriptjqueryhtmlforms

Vue-loader component experiencing issues with applying dynamic CSS styling

I'm working with a Vue Component and I want to enhance it by binding a color to a specific message. Initially, I attempted to achieve this using a binding like :style="styles" However, I encountered the following error: The property or method "st ...

csslaravelvue.jsvue-loader

What measures can I take to ensure a function is only executed once, even in cases where multiple change events are triggered simultaneously?

Individual checkbox clicks work smoothly without any issues. However, checking all checkboxes at once may cause problems when dealing with a large number of municipalities to loop through, leading to flickering in the dropdown and preventing users from sel ...

javascripthtmljquery

Having trouble with Bootstrap card deck's card heights not aligning?

Struggling to align Bootstrap's card deck vertically? One card with shorter text is causing a mismatch and you're not sure how to fix it. On the same page, you want three cards displayed horizontally on desktop and stacked vertically on mobile. ...

csstwitter-bootstrapbootstrap-4

Why did my compilation process fail to include the style files despite compiling all other files successfully?

As English is not my first language, I kindly ask for your understanding with any typing mistakes. I have created a workspace with the image depicted here; Afterwards, I executed "tsc -p ." to compile my files; You can view the generated files here Unf ...

javascriptcssreactjstypescriptless