How to customize the CSS style for a component

UI Components for Vue
Post Reply
findream
Posts: 6
Joined: 21 Feb 2020, 05:18

20 Apr 2020, 11:04

I want to customize the CSS style for Dialog component, and I have two questions:

1. It seems that the class like .p-dialog and .p-dialog-content need to be defined inside <style></style> instead of <style scoped></style>, will these classes affect other single file component (.vue file)?

2. I have two types of dialog, one needs the CSS style { overflow: visible } so that the dropdown will not be cut off when it overflows, whereas the other has much information thus it needs vertical scroll bar when it overflows. But how can I set different CSS styles for these two type of dialog? Currently, I can only use .p-dialog and .p-dialog-content to override the default style, but both dialogs will be affected.

Code: Select all

<template>
    <div>
        <h3>Dialog style test</h3>
        <Button label="Overflow" @click="displayBasic=true" style="margin-right: 30px" />
        <Dialog header="Overflow" :visible.sync="displayBasic" :style="{width: '50vw'}">
            <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
            <template #footer>
                <Button label="Yes" icon="pi pi-check" @click="displayBasic=false" />
                <Button label="No" icon="pi pi-times" @click="displayBasic=false" class="p-button-secondary"/>
            </template>
        </Dialog>

        <Button label="ScrollBar" @click="displayBasic2=true" />
        <Dialog header="ScrollBar Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}">
            Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
            <br><br>
            After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
            <br><br>
            From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
            <br><br>
            Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
            <br><br>
            Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
            <br><br>
            Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
            <br><br>
            <template #footer>
                <Button label="Yes" icon="pi pi-check" @click="displayBasic2=false" />
                <Button label="No" icon="pi pi-times" @click="displayBasic2=false" class="p-button-secondary"/>
            </template>
        </Dialog>
    </div>


</template>

<script>

export default {
    data() {
        return {
            cities: [
                {name: 'New York', code: 'NY'},
                {name: 'Rome', code: 'RM'},
                {name: 'London', code: 'LDN'},
                {name: 'Istanbul', code: 'IST'},
                {name: 'Paris', code: 'PRS'}
            ],
            displayBasic: false,
            displayBasic2: false
        }
    },
    components: {
    }
}
</script>

<style >
.p-dialog .p-dialog-content {
    overflow: visible !important;
}
</style>

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

20 Apr 2020, 15:45

1) This is not PrimeVue specific but how scoped styling works in Vue, you may use /deep/ as well otherwise all the dialogs in the app will get it;

Code: Select all

<style lang="scss" scoped>
/deep/ .p-dialog {
     your styles
} 
</style>
or you can give a class name

Code: Select all

<Dialog class="myspecificdialog"

<style lang="scss">
/deep/ .myspecificdialog{
     your styles
} 
</style>
I'd go with /deep/

2) Demo shows this, one has short content, other has long;

https://primefaces.org/primevue/showcase/#/dialog

You can also use contentStyle property as well.

Code: Select all

<Dialog contentStyle="overflow:visible"

vueUseCase
Posts: 2
Joined: 09 Nov 2022, 22:40

09 Nov 2022, 22:43

As of Vue3 you may want to consider prefixing selectors in your style section with ":deep" instead of "/deep/", which has been deprecated.

Reference: https://stackoverflow.com/questions/480 ... -in-vue-js

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests