Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materialize, what other CSS framework would you recommend?

    <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </head>
    <body>
      <form>
      <table>
        <col width=100>
        <col width=100>
        <col width=100>
        <col width=100>
        <col width=200>
        <thead>
          <tr>
              <th>Date</th>
              <th>Time</th>
              <th>Date</th>
              <th>Time</th>
              <th>Type</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="date" name="day" value="2019-01-01"></td>
            <td><input type="time" name="day" value="10:00"></td>
            <td><input type="date" name="day" value="2019-01-01"></td>
            <td><input type="time" name="day" value="18:30"></td>
            <td>
                <select>
                  <option value=1>Regular shift</option>
                  <option value=2>Vacation</option>
                </select>
            </td>
            <td><input name="day"></td>
          </tr>
        </tbody>
      </table>
      </form>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>

Answer №1

Here's a quick solution for improving the CSS...

One option is to incorporate this snippet of code:

<style>
td {padding: 2px 5px;}
td input{margin:0 !important;height:2em !important;}
td .select-wrapper input.select-dropdown{height:2em;line-height:2em;}
</style>

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

Issue with PHP functionality not functioning properly

I've been working on implementing an AJAX Form to allow users to upload their profile picture on my website. However, I've encountered some difficulties with the process. I have created a PHP page where the form is supposed to be posted using AJA ...

Automatically updating database with Ajax post submission

I have customized the code found at this link (http://www.w3schools.com/PHP/php_ajax_database.asp) to update and display my database when an input box is filled out and a button is clicked to submit. Below is the modified code: <form method="post" acti ...

What is the best way to extract multiple children from a shared tag using BeautifulSoup?

My current project involves using BeautifulSoup to scrape thesaurus.com for quick access to synonyms of specific words. However, I've run into an issue where the synonyms are listed with different ids and classes for each word. My workaround is to tar ...

What is the best method for resizing an SVG according to the size of my website's window?

I am attempting to implement a scalable settings icon SVG file that adjusts based on the window width. My approach involved creating a JavaScript function that alters the element's dimensions according to the window size, but unfortunately, this metho ...

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...

The color used to highlight questions on Stackoverflow

Could someone please help me identify the specific color that stackoverflow uses to highlight the background when a question answer link is followed? For instance, take a look at this link: Is there a float input type in HTML(5)? Appreciate any assistanc ...

Decoding JSON in AngularJS

Looking for assistance in parsing a JSON 2D array with Angular JS and fetching images from the array. Can anyone provide some guidance on this? I have updated my Plunker at this link HTML Code <!DOCTYPE html> <html lang="en" ng-app="myAp ...

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

Unlimited horizontal slider control powered by HTML

In my quest to develop a slider control with infinite capabilities, I am looking for a way for users to slide left and right on a bar or panel, allowing them to navigate through past dates when sliding left and future dates when sliding right. While there ...

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

I'm in the process of updating a data-centric website that relies on information from an automated database engine. In the HTML, there's a fixed-size button containing text pulled from the database. I'm looking to incorporate some CSS styles ...

Enhancing the window.print() Functionality

I recently utilized the window.print() function to print a web page containing a table. The headers of the table were styled with font color, however when printed, they appeared black instead. Below is the code snippet: <thead> <tr style="color:r ...

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

Struggling to bind a controller post method to a basic HTML form on the view. Trying to understand how to populate the parameter and call the method using form data. Controller method: [HttpPost("addcomment")] public JsonResult AddCommen ...

What is the best way to handle an array (or manually loop through ng-repeat)?

AngularJS Version: 1.3.15 Confession: While I have limited knowledge of AngularJS, I am required to utilize it due to its integration in the framework I am working with. I aim to make changes to some HTML/AngularJS code that currently appears as follows: ...

employing the CSS `:empty` pseudo-class to conceal an element

Upon using chrome for inspection, I stumbled upon the following code snippet: <div class="entry-content"> <p>We .... </p> </div> <footer class="entry-footer"> </footer> Occasionally, this f ...

Tips for updating the border color of a navigation tab

Struggling with changing the border color for Tab 2, while Tab 1 works fine. All my custom CSS comes after Bootstrap 5 CSS, so why isn't it overriding the changes? CSS .nav-tabs { border-color: black; } .nav-tabs > li > a { border-colo ...