Base solution for your next web application
Open Closed

Styling of PrimeNG p-fileUpload #6681

User avatar
0
peabmw created

Hi

I would like the fileupload (visible in demo components in left menu) to look as nice as it does on https://www.primefaces.org/primeng/#/fileupload :

But in my Zero site the buttons does have some right margins with borders and bottom border is missing:

Any tip on how I can fix the styling? I have tried to set a custom class but I have not been able to override the styling for the component (would be great if the component looked better and worked with the theme in default setup).

Regards

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
6 Answer(s)
  • User Avatar
    0
    aaron created
    Support Team

    Show changes you tried (HTML, CSS).

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    peabmw created

    I have applied custom class to the component: <p-fileUpload styleClass="ui-fileupload-override" ...

    Then setting a style in primeg.file-upload.less:

    .ui-fileupload-override .ui-fileupload-buttonbar {
    background-color: green;
}

    But this does not override style from theme.css:

    I got it woking now just by adding !important :

    .ui-fileupload-override .ui-fileupload-buttonbar {
    background-color: red!important;
}

    Also tried ::ng-deep but was unable to get it to work, seem deprecated.

    So I can override at least now, not sure if i'm doing it the right way though.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    aaron created
    Support Team

    Try:

    body .ui-fileupload-override .ui-fileupload-buttonbar {
    background-color: green;
}
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    peabmw created

    Nice, adding body works, thank you! Do you happen to know why that fix worked?

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    aaron created
    Support Team

    CSS Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity CSS Specificity Calculator: https://specificity.keegan.st

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    peabmw created

    Thank you

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
User avatar aaron
Labels
None yet