Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

I utilized the angular 6 datatable to paginate the data in a table format.

https://www.npmjs.com/package/angular-6-datatable

Everything is functioning properly, but I am struggling with styling the footer of mfBootstrapPaginator.

https://i.sstatic.net/izdoi.png The items appear stacked vertically. Is there a way to align them horizontally or at least have them positioned next to each other? 

<div class="table-responsive">
  <table id="tablePreview" class="table table-hover table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data; let i = index;">
        <td></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- I have 8 columns in my project -->
        <td colspan="8">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25, 50, 100]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

I am using Angular 6 and Bootstrap 4.

htmlcssangulartwitter-bootstrapdatatable

Answer №1

Modify the appearance of the pagination element:

.pagination {
   display: inline-block !important;
}

Answer №2

Although this question is old, my answer might still help someone. I came up with the following solution:

<style>
  ul.pagination {display: inline-flex !important;}
  .pagination li.active .page-link {background-color: rgb(54,61,71) !important; border-color: rgb(54,61,71) !important;}
</style>

I placed this code in my index.html before the closing head tag and it worked perfectly for me. Hopefully, it can assist someone else too.

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

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

I am looking to personalize the AddedToCartDialogComponent with the selector cx-added-to-cart-dialog

I've been trying to tailor the AddedToCartDialogComponent by incorporating new elements into the dialog window. Despite closely following Spartacus documentation, I am unable to see any changes taking effect. Running on Spartacus version 4, here is a ...

angularspartacus-storefront

Encountering difficulty in presenting detailed information using a .json file

My photo gallery app functions perfectly when fetching data from jsonplaceholder.typicode.com. However, when I use my own local data, it breaks whenever I try to click on a photo to view its details. How is it possible for the photos to display correctly b ...

angular

Delete particular user inputs following a $.ajax request

I have created a search feature with inputs that allow users to search the database using ajax requests. Unfortunately, I am facing an issue where the response from the server includes the search inputs themselves. This is not what I want. Here's a ...

javascriptjqueryhtmlajax

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

phphtmlinclude

Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder. Below is ...

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

Utilizing Semantic HTML to Showcase a Product Comparison

As I prepare to showcase various products on a website for customers to choose from, each with its own name, description, and list of pros and cons compared to other products, I find myself unsure about the best way to structure the HTML. While headings a ...

html

Angular HTTP post is failing on the first attempt but succeeds on the second try

Just started working on my first Angular exercise and encountered an issue where I am receiving an undefined value on the first attempt from an HTTP post request. However, on the second try, I am getting the proper response in Edge and Firefox. Thank you f ...

jsonangularhttptypescriptpost

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

javascripthtmlcssangularjs

Issue with material datepicker not initializing start value when input field is clicked

Using the Material date picker, I've implemented the date picker feature with the startAt binding to establish a default selected value. Users can open the calendar overlay by clicking on the input field, thanks to the (click) and (focus) event bindin ...

angularangular-materialdatepickerangular-material-datetimepicker

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

javascripthtmlcss

Creating an array of custom objects in JavaScript.Initializing custom objects in an

Is there a proper way to prevent the error "Cannot read property 'length' of undefined" when initializing an array of custom objects in javascript? situation export class MyClass implements OnInit { myArray: MyObject[]; } example <div ...

javascriptarraysangularinitialization

Guide on aligning a series of divs in a single row within a parent div

Within the confines of a 400px wide div called "container", there are six left-floated "box" divs, each 100px wide. The combined width of the "box" divs exceeds 400px, resulting in the divs wrapping onto two lines, with 4 on the first and 2 on the second ...

css

Uncovering a commitment to reveal the valuable information within

Whenever my Spring Boot back-end responds to front-end requests, it structures the data like this: { "timestamp":[2022,6,16], "status":"OK", "data": { "products": [{"product ...

angulartypescriptpromise

The functionality of the class in Angular Bootstrap 4.3 is currently experiencing a

I recently upgraded from Bootstrap version 3.7 to 4.3 in my Angular 7 project, but I encountered some issues with the following code after the update. <div class="container"> <div class="row"> <app-select> ...

angularbootstrap-4

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

I'm looking to create an HTML element where the default data (stored in the variable 'preselectedValue') is automatically filled into the input field when the component loads. The user should then be able to directly edit this search string. ...

htmlangulartypescriptangular-material

Issues arise when the elements <html> and <body> fail to adhere to a 100

Lately, I've been struggling with various problems related to heights. I was able to resolve the height issues of certain elements using flex:auto and flex-shrink:0. However, I'm facing difficulties getting the HTML and Body tags to cooperate ( ...

htmlcssheight

The mixin animation received 2 arguments, even though it only accepts 1

Below is the sass code snippet, @include animation(swayb $speed ease infinite 3s, reset 1s ease forwards 5s); When I try watching using compass watch on my Ubuntu machine, it triggers an error, (Line 2500 of _includes/_common.scss: Mixin animation tak ...

cssanimationsass

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

javascripthtmlajaxmobilebrowser