0

I am new to angular js. I want to know how to apply a style on a pagination box(view). The code below provides the rectangular box view. 

<!-- table here -->

<dir-pagination-controls max-size="2" direction-links="true"
 boundary-links="true"> </dir-pagination-controls>

I want to have the style below.

enter image description here

How can I add the above style in the angular pagination?

slawekwin
  • 6,270
  • 1
  • 44
  • 57
user5863037
  • 79
  • 1
  • 2
  • 16
  • First, you need to inspect *the rendered* HTML. Do you know how to do that? In Chrome or Firefox, load the page that displays the pagination. Then right-click on the pagination and choose "Inspect Element". There in your developer's console (that's what opens when you choose "Inspect Element"), you can see the actual markup that is being used to display the pagination. **Provide the pagination markup here** so that we can help you style it. – random_user_name Aug 23 '16 at 13:19

2 Answers2

1

Above you use directive for pagination. The thing is directive can have some separate logic and it also can have it own HTML template e.g.

angular.module('docsSimpleDirective', [])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

As you can see here template just some string but it easy can be html like:

template: '<divid="paginator"><span>1</span><span>2</span></div>'

So if you want to change how HTML looks like you need to add style in your CSS :)

If you have more complicated structure of website you can have a look at this question as well

You can find more about directives in here : https://docs.angularjs.org/guide/directive

Community
  • 1
  • 1
Andurit
  • 5,612
  • 14
  • 69
  • 121
0
 <dir-pagination-controls 
max-size="4" 
direction-links="true" 
boundary-links="true"
style="float:right; padding-right:10px;-moz-border-radius: 75px;-webkit-border-radius: 75px;">
</dir-pagination-controls>

Try this once.

Alexa
  • 77
  • 11