When using <p-button> without a label, it displays an invisible <span> with the ui-button-text style, effectively overlapping other text on

I am facing an issue with the code on my website:

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
<a href="{{attachment.filePath}}" target="_blank">{{attachment.originalFilename}} - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}</a>

The button is displaying a trash icon and has no text.

When viewing the webpage, the result looks like this https://i.sstatic.net/s8h6J.png

However, if I click on the text "Contents.json", it triggers the button instead.

Upon inspection, I noticed that there is a "span" element covering the text as shown in the screenshots provided https://i.sstatic.net/6Ku19.png

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

The <span> has the class "ui-button-text" assigned to it. The definition for ui-button-text is as follows

body .ui-button .ui-button-text, body .ui-datepicker-buttonpane > button .ui-button-text {
    padding: 0;
    line-height: 2.25em;
    min-width: 100px;
    min-height: 2.25em;
    text-align: left;
}

Since I never defined any CSS styles for ui-button-text, I would prefer not to modify the content. How can I fix this problem of the button label overlapping the clickable content below it?

Any help or suggestions are greatly appreciated!

javascripthtmlcssangularjs

Answer №1

"ui-button-text" is a class that is automatically added by the library internally, but we have the option to override this overlapping issue using CSS.

In order to address this issue, you will need to include an additional custom class in your code:

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger custom-class-for-override"></p-button>

I have included "custom-class-for-override" in the above code for reference purposes. You can use this class to apply your own CSS styles for button width and height.

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

Is the table row changing in size when a filter script class is applied?

When trying to filter table rows by category and adding the class filterTr to the element <tr>, I noticed that the width of the <tr> element changes, causing it to no longer align with the <th> element above. I am unsure why this resizin ...

cssfilterhtml-tablewidth

Transferring information between two pages when a button is clicked in Angular

How can I display hero details on the hero-details page when clicking a button? I'm currently struggling to make it work. When I click the button, the details show up on the hero-list page, but using the routerLink doesn't display the data. I am ...

htmlangular

Using the background-size cover property in Firefox

While working on a website, I encountered an issue where the background image did not display correctly across different browsers. Specifically, when using the background-size: cover property in Chrome and Safari, the image filled up the entire screen as i ...

cssfirefoxbackground-image

What is the best way to export two functions from a server-side module in JavaScript?

Working with Node/Express. In my project, I have an index.js server file and a separate js module called validmoves.js. Usually, to export a single function from a module, I can simply use the following syntax: module.exports = shuffleFunction; Then, i ...

javascriptnode.jsexpress

You cannot use voice_channel.join() to create a music bot in discord.js v13

As I was working on a new music command feature for my Discord bot, I encountered an issue. Whenever I try to use the command -play {url}, I keep getting an error message that says: voice_channel.join is not a function. I searched through various resource ...

javascriptnode.jsdiscorddiscord.js

The dynamic duo: Visual Studio 2013 and Angular

I am in need of utilizing Visual Studio 2013 for a project that was scaffolded with Angular + Gulp using Yeoman. Now, the task at hand is to make edits within Visual Studio. Would you be able to guide me on how to activate Angular within Visual Studio? ...

angularjsvisual-studiovisual-studio-2013gulpyeoman

What is the best way to generate a table with continuously updating content?

If the user input : $sgl = 2; $dbl = 0; $twn = 1; $trp = 0; $quad = 0; $price_room = 250000; I want the result looks like the picture below : https://i.sstatic.net/iQYqr.jpg I have tried the following code : <?php $sgl = 2; $dbl = 0; ...

phphtmlcss

What is the quickest way to display data immediately after submitting a form using ajax?

Is there a way to display data instantly after submitting a form via AJAX and saving it through a controller function? I want to be able to view the saved data on the same page without having to refresh it: <span class=" store_comment_like " data-com ...

javascriptajaxlaravellaravel-5

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

javascriptjqueryqunit

The vue-croppa component is showing unusual behavior, with an error message stating "Failed to mount component: template or render function not

I recently tried utilizing vue-croppa for image cropping in my project. I installed it using the npm package manager with the command: npm install --save vue-croppa However, when attempting to implement it as usual: import Croppa from 'vue-croppa&a ...

javascriptnpmvue.js

Troubleshooting problems with printing HTML divs and page breaks caused by using float and position styles

Look at this class: .divDutySlip { width: 90mm; min-height: 120mm; padding: 2mm; /*float:left; position: relative; */ margin: 2mm; border: 1px solid #000000; page-break-inside: avoid; } I've modified two styles. Dis ...

htmlcsspage-break-inside

Using AngularJS to Showcase JSON Array

I am currently working with a .json file that contains information about networks, IP addresses, and zones. I am trying to figure out how to display the "ip" array in my .html file. [ { "network":"net1", "ip":[ "19 ...

javascriptjsonangularjs

Add a fresh item to a list using jQuery

Attempting to add a new list item using jQuery. In this scenario, the process works well, but when attempting to retrieve the value of an input field using .val(), no list item is created. http://www.example.com Code snippet: $(document).ready(functi ...

javascriptjqueryhtml

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...

javascriptangularangularjsangular-ng-if

Exploring the location.path in angularjs

Is there a way to use $location.path for redirection in angularjs? I have the configuration below: ngModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $urlRouterProvider. ...

javascriptangularjs

What is the best way to obtain the true dimensions of an HTML element?

Is there a way to determine the dimensions of a <div> element in order to accurately position it at the center of the browser window? Additionally, which browsers are compatible with this method? ...

javascripthtmldhtml

Can you explain the significance of triple brackets (e.g. {{{ content }}}) in the context of Javascript/Typescript?

As I delve into the code of a fresh project in which I hope to contribute, I have come across numerous methods defined with triple brackets, like so: deinitialize() {{{ this.destroyed = true; $(window).off("resize", this.resize as () => void); ...

javascriptreactjstypescript

Issue with grid element not properly scaling using the transform:scale property

I have encountered an issue where a simple grid, with the gaps set to 0, displays a small line when I apply the transform:scale(1.5) css property. I am unsure if this is a bug or if I am doing something incorrectly. Interestingly, the result in Firefox dif ...

htmlcssgoogle-chrome

Adjusting the screen width to activate a responsive nav bar with a centered title

I'm facing an issue with the alignment of the heading within a navigation bar, causing the links to wrap before the collapse of the nav-bar occurs - https://i.sstatic.net/bKyPM.png I am trying to make the links collapse earlier than they currently d ...

htmlcssbootstrap-4media-queriesnav