stylesheet css for datables

UI Components for Angular
Post Reply
daftster
Posts: 15
Joined: 24 May 2016, 22:20

24 May 2016, 23:02

Hi,

How do I override the css settings for the datables? How come the steps I've done below does not work.

1. Copy all ui-datatable entries from the main.css file and paste it to my components css file.
.ui-datatable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed
}....
2. Tried changing the width above to 50% and do number 3 to see if it is taking effect.
3. Add a tag to the html tag? Is this correct?
<p-dataTable class="ui-datatable" [value]="logs" [rows]="10" [paginator]="true">
<p-column field="update_time" header="DateTime" [sortable]="true"></p-column>
<p-column field="src_ip" header="Source" [sortable]="true"></p-column>
<p-column field="dst_ip" header="Destination" [sortable]="true"></p-column>
</p-dataTable>

Thanks,

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

24 May 2016, 23:08

Where do you keep your css overrides? Inside an external css loaded with a link tag? Or using styles or stylesURL of your component?

daftster
Posts: 15
Joined: 24 May 2016, 22:20

25 May 2016, 00:38

I intend to use it in stylesURL of the component.

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 May 2016, 13:16

Then try removing scoping by setting view encapsulation to none;

Code: Select all

@Component({
   //...
   encapsulation: ViewEncapsulation.None
})

daftster
Posts: 15
Joined: 24 May 2016, 22:20

25 May 2016, 15:25

It worked! thanks! :)

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 May 2016, 16:52

That is good to hear!

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests