I'm developing a web app using Angular 12 and PrimeNG 13.
However, I'm faced with a weird issue. Consider the two simple buttons defined below:
<p-button label="Delete" icon="pi pi-trash" class="mr-1 p-button-danger"></p-button>
<button pButton label="Delete" icon="pi pi-trash" class="mr-1 p-button-danger"></button>
According to PrimeNG documentation, these two should behave the same way. However, this is not the case for me, here's how those two buttons render in my app:
Basically, when using the component directly (the first one in the code sample above) most style classes seem to not work. For example, in the sample above the p-button-danger class does not apply the appropriate red background. Same goes with the other style classes I've tested. If instead I use the pButton directive (second one in the sample) everything works as intended.
I've used PrimeNG in the past and I'm pretty sure I didn't have this problem before... any idea of why this is happening?
this is because they both do not work exactly the same.
For the p-button directive, you must use the styleClass attribute, because it's not directly applied to the element :
<p-button styleClass="p-button-sm p-button-raised mr-2" label="Something" icon="pi pi-upload">
</p-button>
Cheers
Related
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
I heard, but cannot find any document to double check, that this technique helps reduce the computer processes with specificity of CSS, when the browser has to calculate which class to apply when a tag has IDs or Classes in the document.
This is an extract from Google Material Design Lite, which uses the technique such:
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
You will notice the class
mdl-button
This one is used as an ID basically. While
mdl-button--colored
is the ID mentioned above, with the class
colored
So, practically this is the same to:
#mdl-button.colored
With the difference that the computer wont have to process the specificity with the ID and Class, because now we only have a unique class.
So again.. the question is "how is this technique called" or if there is no name, maybe can someone post a link to documents that explain deeply the concept?
Cheers guys!
You might want to check out the Block Element Modifier methodology for CSS. The idea behind it helps you achieve reusable components and code sharing in the front-end.
Check out this link for more information:
http://getbem.com/introduction/
descendant, child or adjacent, and overly qualified selectors
Which are what Google says not to use.
I am using Ionic/Angular and also animate.css to give some fancy touches.
At first I was using this type of tabs and everything was working properly
<a class="tab-item has-badge" href="#/app/bet-slip">
<span class="badge badge-assertive animated"
ng-class="picksCount?'rubberBand':'bounceIn'">{{betSlipCount}}</span>
<i class="icon ion-code-download"></i>
</a>
but the requirements says that I need to use <ion-tabs></ion-tabs> and thats what I am trying.
In the first type of tabs above you can see that there is a <span> that actually holds a badge with an ng-class and at the end {{betSlipCount}}, that ng-class it is been applied every time that {{betSlipCount}} which is an integer changes thru a boolean named picksCount. now I am using the type of tabs I mentioned before and now I have:
<ion-tab title="BetSlip"
class="animated"
ng-class="picksCount?'rubberBand':'bounceIn'"
badge="betSlipCount"
badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
as you can see some stuff change there, the badege now is inside the same first tap I do not know how to apply the ng-class correctly in this case, and I need the same behavior, I need that class applied to the badge every time that the betSlipCount changes.
I think you don't need the ng-class condition there at all. That condition should be in your controller and just store the calculated class in your controller and use that variable in your ng-class statement in the html. The value change should be automatically updated in the html when that scope variable changes.
Haven't tried, but it might solve the issue.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I've not seen a useful, authoritative web resource which says how to reliably enable rollover effects on a4j:commandButton elements in RichFaces JSF content.
I have found plenty of css resources re buttons, but then when they start talking about html I start wondering what the equivalent is in more recent web technologies.
Basically I want my buttons to look different on hover and then on click. I'd like to use images but client side js is out of scope for this q.
m
Use the following attributes as in this example below to your a4j:commandButton (have a look at the full list (v3.3.1.GA)):
<a4j:commandButton value="Submit" styleClass="ctlBtn"
id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
reRender="allMyOtherplaces"
onmouseover="this.className='ctlBtn btnHover'"
onmousedown="this.className='ctlBtn btnDown'"
onmouseup="this.className='ctlBtn'"
onmouseout="this.className='ctlBtn'"
onclick="this.className='ctlBtn btnDown'"
oncomplete="this.className='ctlBtn'" />
And create classes ctlBtn, btnHover and btnDown in your included .css file.