F
Filament•5mo ago
Sourabh

Modal Blade component background not showing transparent.

I've created two modals: 1. A slide-over modal to display the number of products in the cart. 2. A pop-up modal that appears when removing a product from the cart. When there are only 2 products in the cart, the remove modal pop-up displays correctly with a transparent background. However, when there are 10 products in the cart, the remove modal pop-up shows with a dark black background instead of the transparent one. How can I fix this? Can anyone help?
No description
No description
No description
12 Replies
Dennis Koch
Dennis Koch•5mo ago
Sounds like you are opening 10 modals but hard to help because you didn’t share any code.
Sourabh
SourabhOP•5mo ago
Please find attachment of file for your reference.

ProductsPresentation...

products-presentatio...

Sourabh
SourabhOP•5mo ago
The "Remove product" modal code, defined in the table body, has an issue. Please refer to the attached file, products-presentation-cart.blade.php. 
<?php 
                <x-filament::modal id="remove-product">
                            <x-slot name="heading">
                            </x-slot>
                           //Modal Content code ...
                 </x-filament::modal>
                 
         ?>
<?php 
                <x-filament::modal id="remove-product">
                            <x-slot name="heading">
                            </x-slot>
                           //Modal Content code ...
                 </x-filament::modal>
                 
         ?>
how do I manage nested modal blade component to avoid black background?
Dennis Koch
Dennis Koch•5mo ago
Are you repeating that modal code by any chance? E.g. through a for loop?
Sourabh
SourabhOP•5mo ago
Thank you for your response. The issue with the modal's black background has been resolved. However, when I select a file to upload, the modal's height behaves inconsistently and blinks. I have attached a video and file for your reference.

products-presentatio...

ProductsPresentation...

Sourabh
SourabhOP•5mo ago
The "Generate Presentation" modal code. having issue in the file "Products-presentation-cart.blade.php" I have try wire:ignore.self but its not working .can you please help me for the same ? 
<?php
 <button wire:click="openModalOfGeneratePresentation">Generate Presentation</button> 
  <x-filament::modal id="generate-presentation" width="lg" >
        <x-slot name="heading">
            Generate Presentation
        </x-slot>                  
        <div class="py-0">
            <form  wire:submit.prevent="generatePresentation">
                <label >Upload Logo </label>                                   
                <input  type="file" wire:model="logo">
                <button type="submit" wire:loading.remove="generatePresentation">
                    Submit
                </button>
                <button type="button" wire:loading wire:target="generatePresentation" style="display:none"  
                    wire:loading.attr="disabled">                                     
                    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                         class="animate-spin fi-btn-icon transition duration-75 h-5 w-5 text-white"
                         wire:loading.delay.default="" wire:target="generatePresentation">
                        <path clip-rule="evenodd"
                              d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                              fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
                        <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
                              fill="currentColor"></path>
                    </svg>
                    Submit
                </button>
            </form>
        </div>
   </x-filament::modal>
?>
<?php
 <button wire:click="openModalOfGeneratePresentation">Generate Presentation</button> 
  <x-filament::modal id="generate-presentation" width="lg" >
        <x-slot name="heading">
            Generate Presentation
        </x-slot>                  
        <div class="py-0">
            <form  wire:submit.prevent="generatePresentation">
                <label >Upload Logo </label>                                   
                <input  type="file" wire:model="logo">
                <button type="submit" wire:loading.remove="generatePresentation">
                    Submit
                </button>
                <button type="button" wire:loading wire:target="generatePresentation" style="display:none"  
                    wire:loading.attr="disabled">                                     
                    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                         class="animate-spin fi-btn-icon transition duration-75 h-5 w-5 text-white"
                         wire:loading.delay.default="" wire:target="generatePresentation">
                        <path clip-rule="evenodd"
                              d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                              fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
                        <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
                              fill="currentColor"></path>
                    </svg>
                    Submit
                </button>
            </form>
        </div>
   </x-filament::modal>
?>
sir_abdull
sir_abdull•5mo ago
Seems your video is also dark :squint:
Sourabh
SourabhOP•5mo ago
The black background issue has been resolved. I have posted a video for another issue with modal. When I select a file to upload, the modal's height behaves inconsistently and blinks.
Dennis Koch
Dennis Koch•5mo ago
The modal is flickering because the submit button is hidden during upload. Is this mybe because of wire:loading.remove="generatePresentation"? Probably some wire:loading stuff at least.
Sourabh
SourabhOP•5mo ago
You're absolutely correct.
Sourabh
SourabhOP•5mo ago
I'm encountering another issue. When I use the "Add To Presentation" action in the Filament table, the Livewire event $this->dispatch('addProductsToLocalStorage', $cartData); isn't being triggered. How can I properly dispatch the event to store data in local storage from the Filament table?

ProductQuote.php

product-quote.blade....

Sourabh
SourabhOP•5mo ago
ProductResource.php table action code . 
<?php
          Tables\Actions\Action::make("product-presentation")->label("Add To Presentation")
                ->action(function ($record , ProductQuote $productQuote) {
                         $productQuote->mount($record->id);
                         $productQuote->addToPresentation($record);
                 })
    ?>
<?php
          Tables\Actions\Action::make("product-presentation")->label("Add To Presentation")
                ->action(function ($record , ProductQuote $productQuote) {
                         $productQuote->mount($record->id);
                         $productQuote->addToPresentation($record);
                 })
    ?>
The addToPresentation method with the event this->dispatch('addProductsToLocalStorage', $cartData) isn't firing from the ProductQuote.php file, so it's not being detected in product-quote.blade.php. 
<?php 
    public function addToPresentation() {
       //code here
      this->dispatch('addProductsToLocalStorage', $cartData);
    }
?>
<?php 
    public function addToPresentation() {
       //code here
      this->dispatch('addProductsToLocalStorage', $cartData);
    }
?>
<script>
    Livewire.on('addProductsToLocalStorage', data => {
           localStorage.setItem('productCart', JSON.stringify(data));
           Livewire.dispatch('loadAllProductsFromLocalStorage');
        });
 <script>
<script>
    Livewire.on('addProductsToLocalStorage', data => {
           localStorage.setItem('productCart', JSON.stringify(data));
           Livewire.dispatch('loadAllProductsFromLocalStorage');
        });
 <script>
Want results from more Discord servers?
Add your server