Attempting to synchronize the top row headings with the corresponding rows beneath

I can't seem to get the column heading aligned perfectly with the rows below it. The headings always appear slightly to the right. I've already tried adjusting the margin and removing overflow auto, but nothing seems to work. Any suggestions on how to align the column heading with the rows below it would be greatly appreciated. Thank you.

You can find the full code at this link.

The alignment of these columns is off:

    <div class="row" style="background-color: yellow;">
        <div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
        <div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
        <div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
    </div>

However, these columns are displaying correctly:

    <div id="data-row">
        <div class="row" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder" style="width: 100%;">
        <div class="col-4">{{birds.ID}}</div>
        <div class="col-4">{{birds.Name}}</div>
        <div class="col-4">{{birds.Type}}</div>
        </div>
    </div>
csstwitter-bootstrapbootstrap-4

Answer №1

To ensure proper alignment, make sure to add the no-gutters class to both the row containing headings and the data rows. Additionally, you can remove the width: 100% property from the #data-row.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bda7bfa7b9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186c766e7668">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<style>
    body {
        margin: 0 auto;
    }

    a {
        text-decoration: none;
    }

    .container {
        border: 1px solid black;
    }

    .content {
        padding: 5px;
        width: 100%;
    }

    #data-row {
        /*width: 100%; */
        min-height: 200px;
        max-height: 500px;
        overflow: auto;
    }

    .row:nth-child(even) {
        background: #CCC
    }

    .row:nth-child(odd) {
        background: #FFF
    }

    .row .section-header {
        padding: 5px !important;
        background-color: #7C9DB9 !important;
    }

    .header-span {
        color: #fff;
        margin-right: .7em;
        cursor: pointer;
        font-size: 1.5em;
    }

    .span-active {
        border-bottom: solid 1px #fff;
    }

    .col-4 {
        border: solid 1px red;
    }

    .overflow-y {
        overflow-y: scroll;
    }
</style>

<div ng-app="myApp" ng-controller="myController">
    <div class="container">

        <div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
            <div class="col-12">
                <span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
                    {{tab.label}}
                </span>
            </div>
        </div>

        <label>Search: <input ng-model="searchText"></label>

        <div class="row no-gutters overflow-y" style="background-color: yellow;">
            <div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
            <div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
            <div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
        </div>

        <div id="data-row">
            <div class="row no-gutters overflow-y" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder">
                <div class="col-4">{{birds.ID}}</div>
                <div class="col-4">{{birds.Name}}</div>
                <div class="col-4">{{birds.Type}}</div>
            </div>
        </div>
    </div>
</div>

Answer №2

One alternative approach is to utilize a table instead of rows and columns for organizing your data. Linking to Bootstrap-table, an extension that generates tables with aligned columns and scrollbars for easy data navigation. Bootstrap-table also offers functionalities like search and column-based sorting. You have the option to either hardcode the table into your webpage or build it dynamically from a JSON file.

Although actively maintained, Bootstrap-table is slightly outdated in terms of its compatibility with Bootstrap 4 (currently running on version 4.3.1 instead of 4.6.0).

To improve accessibility, I've replaced the sorting arrows used by Bootstrap-table due to what I believe is insufficient contrast between them.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908550c191a141d3849564940564b">[email protected]</a>/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2aff6e3e0eee7c2b3acb3baacb1">[email protected]</a>/dist/bootstrap-table.min.js"></script>


<style>
    .bootstrap-table {
        margin-bottom: 1rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .th-inner {
        padding: 0.25rem;
    }

    .table td,
    .table th {
        padding: 0 0.25rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .both {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .asc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }

    .bootstrap-table .fixed-table-container .table thead th .desc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 1.1875rem, 1.1875rem;
    }
</style>

<div ng-app="myApp" ng-controller="myController">
    <div class="container">

        <div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
            <div class="col-12">
                <span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
                    {{tab.label}}
                </span>
            </div>
        </div>

        <label>Search: <input ng-model="searchText"></label>

        <table class="table table-bordered mb-5" data-toggle="table" data-search="true" data-height="468" data-show-columns="true">
            <thead>
                <tr>
                    <th data-field="id" data-sortable="true">ID</th>
                    <th data-field="name" data-sortable="true">Bird Name</th>
                    <th data-field="type" data-sortable="true">Type of Bird</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table content goes here -->
            </tbody>
        </table>

    </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

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss

Elements within div not aligning in a single row

I am currently working on a React application where I need to align 2 links and a button in a row under a div. However, only the links are aligning in a row, not the form fields. Below is my code snippet: <div className='header'> < ...

htmlcssreactjsrow

Changing the special characters in ASP.NET MVC

I'm facing an issue with c# and html code that involves special French characters : <html> <head> <link rel="stylesheet" href="~/Content/jquery.treeview.css" /> <script src="~/Content/jquery.cookie.js" type="text/javascri ...

c#html.netcssasp.net-mvc

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs

The information presented in the following content seamlessly complements the captivating banner image

I am facing an issue with my banner image that is supposed to display only on small devices in a specified section. For more details, please refer to the following Stackoverflow Topic However, this setup has caused the content below to overlap and no long ...

htmlcssbootstrap-4

Displaying and hiding elements as the page is scrolled

Is there a way to create a single scrolling page with a fixed element that remains visible as the user scrolls down? Imagine an image of a car on a road, where the car appears to be moving down the road as the user scrolls. The car should go under certain ...

jqueryhtmlcss

Is it possible to eliminate the span element with the sr-only class in a Bootstrap-vue table?

Displayed below is a sample Bootstrap-vue table implementation: <template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> </div> </template> <script> export default { data() ...

vue.jsbootstrap-4bootstrap-vue

Adding the children of JSON objects to every individual div element

How can I add each day's players [day-1, day-2, day-3, day-3] wrapped in a <span> into the .card-body section as required? The goal is to load only four card-body. var vehicles = { "day-1": { "player-1-1": "Ford", "player-1-2": "BMW ...

javascriptjqueryhtmlcss

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

What is the reason for adding CSS styles to a JavaScript file without importing them?

/Navbar.js/ import './navbar.scss'; import {FaBars, FaSearch} from "react-icons/fa"; import { useState } from 'react'; function Navbar(){ const [hide,sethide] = useState(true); const barIcon = document.querySelectorAl ...

javascripthtmlcssreactjs

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design

angularjs - the datepicker popup is displayed for both the start date and end date

Is there a way to prevent the datepicker popup from appearing when clicking on just one input field? Plunkr <form> <div class="form-group"> <label for="fromDate">From:</label> <input type="text" clas ...

angularjstwitter-bootstrapdatepicker

The inconsistent sizing and spacing between browsers is causing some strange issues for me

I can't shake this feeling that it should be so straightforward. I'll include screenshots from Chrome, Firefox, and IE 11 to illustrate. First things first, it's just a basic login form with email and password fields centered both verticall ...

htmlcss

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue? NavBar HTML Code: .navbar-logo { width: 93.75px; height: 23.5px; margin-left: 10rem; } .navba ...

htmlcsstwitter-bootstrapbootstrap-5

Will using lengthy CSS custom property names impact the performance of a website?

I've been contemplating experimenting with projects that aim to shorten CSS variables in order to decrease the size of my CSS file. How do long CSS custom property names impact page performance? Reduction in CSS file size (including compression) Imp ...

cssperformancecss-variables

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design: https://i.sstatic.net/LURG3.png I am ...

javascripthtmlcssfirefox

Expandable tool tip box

I've specified the tooltip's width and height as 100% .tool-tip, .tool-tip.top{ width: 100%; height: 100%; margin-left: -43px; } However, it still fails to expand based on the content within. The issue can be seen here: http://jsfi ...

htmlcsstooltip

Turn off the background of a div

Greetings! I am working on a webpage that includes a button. Upon clicking the button, I would like to display a div and disable the content behind it. The div will also contain a button that can be clicked to hide the div. As a newcomer to Web Programmi ...

javascripthtmlcss

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

jqueryhtmlasp.netasp.net-mvctwitter-bootstrap