How can I make my text align to the left of the search button that is aligned to the right using

How can I align the label "Filter:" to the left of my search box in the upper right corner, instead of it appearing on either side? I've tried using float and text-align commands, but nothing seems to work. Does anyone have a suggestion or tip on how to achieve this alignment? Thank you!

https://i.sstatic.net/f0p7U.png

<!DOCTYPE html>
<html>
    <head>
        <title>Zebra Striped Table</title>
    </head>

    <style type="text/css">
        table{
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            border-top: blank;
            border-bottom: 1px;
            border-right: blank
        }

        th, td{
            text-align: left;
            padding:  16px;
            border-bottom: solid
        }

        tr:nth-child(even){
            background-color: #f2f2f2;
        }

        label {
            display: inline-block;
            text-align: center;
        }

        .wrapper {
            text-align: center;
        }
    </style>

    <body>
        <p style="text-align:center">Thanks for giving your reviews</p>

        <!---Table Data--->

        <div class="container">

            <label>Filter: </label> <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="float: right">

            <table class="table" id="myTable" data-filter-control="true" data-show-search-clear-button="true">
                <tr>
                    <th>Set</th>
                    <th>Day</th>
                    <th>Dj</th>
                    <th>Rating</th>
                    <th>Comment</th>
                </tr>

                <tr>
                    <td>1</td>
                    <td>Friday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>Saturday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>Saturday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>Sunday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>
            </table>
            <br>

            <div class="wrapper">
                <button class="button">Add your review</button>
            </div>
        </button>

        <p style="text-align:center">See you again in 2022!</p>

        <script type="application/javascript">
        function tableSearch(){
            let input, filter, table, tr, td, txtValue;

            //Initialising variables
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");

            for(let i = 0; i < tr.length; i++){
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if(txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else { 
                        tr[i].style.display = "none";
                    }
                }
            }


            }
        </script>

    </body>
</html>

Answer №1

Ensure that both the label and search box are contained within a div element:

<div style="width: 30%; float:right; text-align:left;">
    <label for="myInput" style="width:100%;">Filter: </label>
    <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="width:100%;">
</div>

Answer №2

To improve the layout, rearrange the input and label tags, and apply float: right to the label. It's also recommended to include a for property that matches the input's id.

<input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="float: right">
<label for="myInput">Filter: </label>
label {
  display: inline-block;
  float: right;
}

Additionally, using display: inline-block is unnecessary unless specifying width and height for the label. Refer to this post for more insights on inline-block.

Answer №3

Simply enclose the title and search input within a div, then align it to the right side.

https://i.sstatic.net/Q3PWE.png

<!DOCTYPE html>
<html>

<head>
    <title>Zebra Striped Table</title>
</head>

<style type="text/css">
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border-top: blank;
        border-bottom: 1px;
        border-right: blank
    }

    th,
    td {
        text-align: left;
        padding: 16px;
        border-bottom: solid
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    label {
        display: inline-block;
        text-align: center;
    }

    .wrapper {
        text-align: center;
    }
</style>

<body>
    <p style="text-align:center">Thank you for submitting your reviews</p>

    <!---Table Data--->

    <div class="container">
        <div style="float: right">
            <label>Filter: </label> <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set">
        </div>
        <table class="table" id="myTable" data-filter-control="true" data-show-search-clear-button="true">
            <tr>
                <th>Set</th>
                <th>Day</th>
                <th>Dj</th>
                <th>Rating</th>
                <th>Comment</th>
            </tr>

            <tr>
                <td>1</td>
                <td>Friday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Saturday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>3</td>
                <td>Saturday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Sunday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>
        </table>
        <br>

        <div class="wrapper">
            <button class="button">Share your own review</button>
        </div>
        </button>

        <p style="text-align:center">We look forward to seeing you again in 2022!</p>

        <script type="application/javascript">
            function tableSearch() {
                let input, filter, table, tr, td, txtValue;

                //Initialising variables
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("myTable");
                tr = table.getElementsByTagName("tr");

                for (let i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        txtValue = td.textContent || td.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }

            }
        </script>

</body>

</html>

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

Conflict between multiple jQuery files

Currently, I am in the process of creating a test website for an upcoming project. However, I have encountered some issues with jQuery. This is a static HTML5 website that includes a social widget. The problem arises when I remove a particular jQuery lin ...

Is there a way to use Css Autoprefixer on multiple files at once with a single function

My project built with Angular2 contains over 100 CSS files that do not have any prefixes for browsers like Mozilla or Chrome. I am looking for a tool, gulp task, or anything else that can automatically add prefixes to all of my CSS files. I attempted to u ...

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

Deciding on pixel values, percentages, and sizing elements within CSS styles

For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...

What is the best way to set up unique body backgrounds for each page in WordPress?

My website consists of various pages named as : page-X.php page-Y.php page-Z.php These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file. ...

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

ToggleButton4 Framework is a user-friendly tool for creating interactive

I am currently working with Bootstrap 4 to design a toggle button; however, when I click the button, the checkbox does not update, despite the fact that the active class is being applied. Even when I use $('.btn-group-toggle').button('toggl ...

Can the limit value of an SQL query be replaced with input from an HTML form?

Here is my question: SELECT * FROM learning_assessment.tbl_qna order by rand() limit 10; The table tbl_qna contains questions. My goal is to replace the static limit value of "10" with a number entered by an administrator in an input field. <html> ...

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

Tips for creating rounded corners in an Electron application

const electron = require("electron"); const {app, BrowserWindow, globalShortcut} = electron; const path = require("path"); function createNewWindow(){ newWin = new BrowserWindow({ width: 1000, height: 750, icon: path.join(__d ...

Guide to implementing and utilizing global CSS variables within JSS

Apologies for the lack of clarity in my initial question. I am currently working on a web project using reactjs and utilizing jss for UI style. In my design, I am limited to only 4 colors, with certain elements across multiple components sharing the same s ...

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Recently, I was informed that there is a possibility of working on a project involving ASP.NET 3.5 and C#. A colleague suggested that when we publish the site, we should convert all pages to HTML. This means instead of www.test.com/Page.aspx, it would be w ...

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

Ways to make logo image go over/out of header

I am attempting to create a design where the logo image extends beyond the header and into the content as you scroll, giving the impression that the logo is oversized for the header and protruding from the bottom. Visit the website: For an example of a s ...

Controlling the Class Attribute in a <td> Element with JavaScript Upon Click Event

I am currently grappling with a situation involving a table with 5 <td> elements. By default, these <td> are red in color. If the user clicks on one of them for the first time, it changes to blue. Subsequent clicks turn it orange and then back ...

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

Transform CSS filters into SVG filters

Implementing CSS filters on the <img /> elements has been successful for me. For example: filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px); Now, I am trying to apply the same filte ...

What could be causing my CSS and Bootstrap.css styles not to be implemented on my webpage?

While working on my Ruby on Rails application, I am trying to customize the design to resemble (which can be downloaded from ). However, I am facing an issue where the style sheets are not being applied. I have moved the style sheets from the bootstrap/c ...

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

Is it possible to use template literals in the append method and get the index of the row generated? I understand that calling "this" inside the function selects the specified selector passed as an argument. $(document).on('click', '.ad ...