styleCSS right syntax?

UI Components for Angular
Post Reply
wolfe
Posts: 4
Joined: 21 Jul 2016, 10:56

29 Jul 2016, 11:13

Hello together,
i have a inpumask like this:
<p-inputMask id="txtStartTime" alias="hh:mm:ss" placeholder="hh:mm:ss" [disabled]="startTimeDisabled" [(ngModel)]="starttime"
clearIncomplete="true" maxlength="8" [style]="{width:'100px'}">

This is working so far.

So i want to replace the style tag with a styleClass like this:
<p-inputMask .... styleClass="start-timer">

In my css style file the class is defined so:

.start-timer{
width: 100px;
}


This is not working, laying with [] around styleClass is also not working.

What is the right syntax to move the styles in a separate css file?

jbaird2685
Posts: 52
Joined: 01 Jul 2016, 12:34

29 Jul 2016, 15:54

<div class="myStyle"></div>

caebeman
Posts: 4
Joined: 01 Jul 2016, 21:01

29 Jul 2016, 21:01

If the class is being applied to element but the styling for that class isn't displaying its because of view encapsulation. You can either turn off view encapsulation by setting encapsulation: ViewEncapsulation in your component definition or use the /deep/ selector in your css. If you choose to change the encapsulation be aware that your styles will be able to affect any other components with encapsulation turned off. The angular docs do a good job of explaining /deep/ and talk a bit about encapsulation https://angular.io/docs/ts/latest/guide ... -selectors

wolfe
Posts: 4
Joined: 21 Jul 2016, 10:56

01 Aug 2016, 14:42

I tried out differend options but nothing works inside the prime input mask components.

This is working.
<div class="start-timer">
<p-inputMask .... />
</div>

Access inside the p.inputMask tag it does not work. I study the HTML side shown in the previos answer. I don´t understand it in all, so i can not say all is ok at the moment.

I will have a look later for that issue again.

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

01 Aug 2016, 15:21

How do you include the css file? Is it stylesURL of Angular2? Or a link tag in your page.

wolfe
Posts: 4
Joined: 21 Jul 2016, 10:56

02 Aug 2016, 18:53

I include it with stylesUrl:[...]

but I found now the solution.

If using styleClass in each primeng component you have to set in the included style file a special syntax.

Example:
<p-inputMask alias="hh:mm:ss" placeholder="hh:mm:ss" [disabled]="startTimeDisabled" [(ngModel)]="starttime"
clearIncomplete="true" maxlength="8" styleClass="input-mask"></p-inputMask>

In the included css file use:
:host .input-mask{
width:100px;
text-align:center;
}

This is working!

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests