Arranging pagination elements for table stacking on smaller screens

Below is a code snippet showcasing the table pagination elements and styles I'm using. The layout looks great on medium and larger screens, but when viewed on smaller screens, the pagination elements wrap to the next line while the counts remain floated to the right.

Issue Screenshot:

https://i.sstatic.net/0XiJS.png

I would like the pagination elements to stack either on the left or centered on the screen for smaller screens, as shown in the desired result image below.

Desired Outcome:

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

Code Sample Demonstrating the Problem: (click 'Full Page' and resize your browser window to width below 500px to see the issue)

.button-group {
  list-style: none;
  margin: 0;
  left: 0;
}
.right {
  float: right !important;
}
ul {
  margin-left: 0 !important;
  line-height: 1.6;
  padding: 0;
  list-style-position: outside;
}
ul.pagination {
  display: block;
  min-height: 1.5rem;
}
... (CSS Code Continued)

    ... (Button Elements Continued)
    ... (Pagination List Items Continued)

htmlcsspagination

Answer №1

If you're looking for a solution to your issue, here's a quick and easy fix.

Include the following code:

<div style="clear:both"></div>

Next, remove this line of code:

class Right from Pagination

Finally, here is the updated code snippet:

<div ng-table-pagination="params" template-url="templates.pagination" class="ng-scope ng-isolate-scope"><!-- ngInclude: templateUrl --><div ng-include="templateUrl" class="ng-scope">
<div class="ng-table-pager ng-scope">
    <!-- ngIf: params.settings().counts.length --><ul ng-if="params.settings().counts.length" class="ng-table-counts button-group radius ng-scope">
        <!-- Code repeats multiple times -->
    </ul><!-- end ngIf: params.settings().counts.length --> 
    <div style="clear:both;"></div>
    <ul class="pagination ng-table-pagination">
        <!-- Code repeats multiple times -->
    </ul>
</div>

You can see it in action on Plunker by following this link: http://plnkr.co/edit/1uZ4QgeyTxrPlnvs15Fk?p=preview

Answer №2

You should utilize the clear and float properties for a better layout, I've made the necessary adjustments to your code.

.button-group {
  list-style: none;
  margin: 0;
  float: left;
}
.button-group:after {
  clear:both;
  }


ul {
  margin-left: 0 !important;
  line-height: 1.6;
  padding: 0;
  list-style-position: outside;
}
ul.pagination {
  display: block;
  min-height: 1.5rem;
  float: left;
  clear: both;
}

ul.pagination li {
  color: #222;
  font-size: 0.875 rem;
  height: 1.5rem;
  margin-left: 0.3125rem;
  display: block;
  float: left;
}
ul.pagination li a {
  border-radius: 5px;
  transition: background-color 300ms ease-out;
  display: block;
  padding: 0.0625rem 0.625rem;
}
ul.pagination li.current a {
  background: #bb1018;
  color: #fff;
  cursor: default;
  font-weight: 700;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.button-group.radius>* {
  display: inline-block;
  border-radius: 0;
}
.button-group.radius>:first-child>.button,.button-group.radius>:first-child>button {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.button-group.radius>:last-child>.button, .button-group.radius>:last-child>button {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.button-group.radius>*>.button .button-group.radius>*>.button {
  border-radius: 0;
}
.button-group.radius>* .button, .button-group.radius>*>.button {
  border-left: 1px solid;
  border-color: rgba(255,255,255,.5);
}
.button-group .button {
  border: 0;
  box-shadow: none;
}
.button.small {
  border-width: 2px;
  padding: .375rem .75rem .4375rem;
  font-size: 0.875rem;
}

.button {
  -webkit-appearance: none;
  border-style: solid;
  ...
...

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

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

How can divs be styled to mimic the behavior of tables in IE6 using just CSS and HTML?

Can div elements be styled to resemble tables in IE 6 using just CSS and HTML? Unfortunately, the display properties like table, table-row, or table-cell do not work in IE 6 If it is feasible, what strategies can be employed? ...

htmlcssinternet-explorer

Update your ASP.NET application to replace checkboxes with images

I have attempted the following methods, and I believe the question is pretty clear. Attempted Solution Using CSS: (Unfortunately, this approach did not work as expected and I had to resort to using a jsfiddle) .star + label{ background:url('imag ...

jquerycssasp.net

Designating a specific character set for style sheets

Within my CSS stylesheets, you may come across code that resembles the following snippet: #nav > li::after { content: " ➻"; } It's worth noting that ➻ is not an ASCII character, which can make it risky to use in a file without explicitly ...

htmlcsscharacter-encoding

The rows sent to HTML/Bootstrap from Java through JSON do not neatly wrap across rows evenly

I am having trouble getting images to wrap evenly on an HTML/Bootstrap page that are retrieved by Java and passed through JSON. Despite my expectations, there is a third row created with only one image and a fifth row with 3 extra images. Additionally, whe ...

javahtmljsonajaxtwitter-bootstrap

Can someone guide me on how to verify a user's input by comparing it against a predefined set of strings in JavaScript?

I am new to JavaScript and still learning, so please bear with me. I have a unique task of creating multiple voucher codes, each with a specific redeemable amount. When a user purchases a voucher and enters the code in a text field, I need JavaScript to v ...

javascripthtmlcss

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml

Configuring a Revolution Slider 5+ layer to display as a fixed layer

I wish to keep a consistent shape below my text on all the slides without any flickering. Although Revolution Slider offers static layers, they always appear on top and cannot be layered beneath other slide layers. I attempted to create a layer with no t ...

javascriptjquerycsswordpressrevolution-slider

What is the best way to align an html table to the top of the page?

Can anyone help me with positioning an HTML table at the top of the screen in IE7 without the automatic top border? I am using HTML and CSS for this. I'm currently working on development in VS2008. ...

asp.nethtmlcss

Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...

javascriptjqueryhtmlcss

Mastering the art of seamlessly merging the gradient in the foreground with the background

I want to achieve a unique rainbow gradient effect using only CSS, overlaying it on top of an existing background. The main objective is to make the rainbow fully opaque at the center and gradually transparent towards the edges, seamlessly blending with th ...

csscss-mask

Error: HTML Array script malfunctioning due to undefined in_Array

TL;DR Script Assistance Needed Greetings, I've been grappling with getting this script to function properly using an array structure. However, I keep encountering the error message that in_Array is not defined. If anyone could kindly help me spot any ...

javascripthtmlarrays

Not all Angular Material2 styles are being fully applied

One issue I am encountering is that styles for components such as <mat-chip> or <button mat-raised-button> (the only ones I have found) are not working properly and appear gray by default. However, styles do apply correctly to the <mat-card& ...

cssangularangular-material2

Display v-select options by clicking a button

I am trying to figure out a way to make the vuetify v-select component appear when I click on an icon button. The v-select should remain hidden when closed, only visible when triggered by clicking the button. It's like having the button toggle the vis ...

htmlvue.jsvuetify.jsv-select

Create an interactive mechanism where one scrollbar dynamically adjusts another scrollbar and vice versa

Using the provided js-bin, how can I synchronize scrolling between the "left" div and the "right" div when using the mouse wheel? Currently, if you uncomment the code block, the scrolling behavior changes from scrolling by 100px per scroll to scrolling pi ...

javascripthtmlcss

Can cookies operate on a local server?

Similar Question: Cookies on localhost with explicit domain Here is the code snippet that I am using after the user has logged in: setcookie("user",$entered_username, time()+(60*60*5)); setcookie("password",$entered_password, time()+(60*60*5)); ...

phphtmlcookies

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...

javascriptjqueryhtmliframeheight

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

javascriptjqueryhtmlcss

Exploring the width of Bootstrap 5 Tab Pane content

My issue lies with the content width of my tab panels - specifically, it doesn't work well with columns. I am unable to divide a tab-pane as col-md-7 and col-md-5 (refer to the screenshot below). I am unsure of how to resolve this issue. <div clas ...

htmlcssbootstrap-5