wrapping the container to have div card

Guest User

Hi Team

I have created a container to have div card, but somehow when i select either of the payment options i dont see it and yet have tried to create a css for it. what am i missing from my current code

// html code


				
    
        
            
                Confirm Purchase
            
            
                
                    
                        Owner
                        
                    
                    
                        CVV
                        
                    
                    
                        Card Number
                        
                    
                    
                        Expiration Date
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                    
                
            
        
    


// css code
.card-container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
   }

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana3y ago
Accepted answer
Based on your code, it seems that you have a container with the class "card-container" that should contain the div card. However, you mentioned that when you select a payment option, you don't see the card.

The issue seems to be with the inline CSS style in the
element, where you have set display:none;. This style is hiding the entire form, including the card div, so it won't be visible when you select a payment option.

To fix this, you can remove the style="display:none;" from the
element or modify it to be visible when needed. For example, you can toggle the display property using JavaScript or add a CSS class to control the visibility.

Here's an updated version of your code without the display:none; style:

Confirm Purchase

Thanks
Deepak Rawat3y ago
Based on the provided code snippet, it seems that the issue might be related to the fact that you have set the inline style display: none; on the .creditCardForm div. This will cause the form to be hidden initially. Form validation typically requires the form elements to be visible for the validation to take place.

To fix the issue, you can remove the style="display:none;" from the .creditCardForm div, or you can modify the code to show the form when needed. Here's an updated version of the code without the display: none;:

Make sure to also include the necessary CSS styles for the form to be displayed properly within the .card-container and .container classes.

Once the form is visible, you can proceed with implementing the jQuery plugin for form validation, if you haven't done so already. Remember to include the plugin script and initialize it according to the plugin's documentation.