"Search:" label not rendering on same line as input field

nat5142

Probably another relatively simple question here:

I've added a search filter to a table on this webpage, but I can't figure out why the "Search:" label is rendering above the input field rather than to its left. In my DataTables jQuery code, I'm using the following dom properties (Bootstrap 4):

"dom": "<'row'<'col-md-6 ml-auto'f>>t<'row'<'col-md-6'i><'col-md-4 ml-auto'p>><'clear'>";

but I can see in the inspector that the element is being rendered in this fashion:

<div id="stations_filter" class="dataTables_filter">
    <label>
        "Search:"
        <input type="search" class="form-control form-control-sm" placeholder aria-controls="stations">
    </label>
</div>

My rudimentary knowledge of front-end development tells me that the <input> tag should exist outside of the <label> tag, but because this is dynamically rendered, I'm having some trouble figuring out how to accomplish that.

Is my guess correct? How can I solve this?

Thanks, all!

dataB

The input within the label tag is fine. It looks like you're not loading the DataTables CSS file. It's commented out. Try loading that and it should look right.

If you don't want to load the DataTables you'll need to set your own CSS. You can use something along these lines:

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
}

allan

Looks like the DataTables CSS include has been commented out on your page.

Also regarding the input element being inside the label, that is perfectly valid in HTML - its called an implicit link between them. Often you will see an explicit link using a for attribute, which is what you are thinking of, but either are valid.

Allan