How to override div Css using class name in ASP.Net

Last Reply 2 months ago By Indresh

Posted 2 months ago

 

<asp:Repeater ID="Repeater2" runat="server">
                                    <ItemTemplate>
                                            <!--Wishlist-->
        <!-- BEGIN # MODAL Wishlist -->
        <%--<a id="<%#"generic" + Convert.ToString(Eval("P_Id"))%>">--%>
        <div  class="modal fade modal-login modal-border-transparent" id="WishlistModal" tabindex="-1" role="dialog" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="clear"></div>
                   <!-- Begin # DIV Form -->
                    <div id="modal-wishlist-form-wrapper">
                        <div class="col-md-7 col-sm-12">
                            <div class="row" style="position: relative;">
                                <div class="img">
                                <asp:Image ID="Image1" ImageUrl='<%# Bind("Image5") %>' runat="server" />
                                </div>
                                <div class="panel-overlay-top-left text-contrast wl-modal-listing-tabbed summary-open">
                                    <div class="va-container media">
                                    <asp:Image class="pull-left host-profile-img media-photo media-round space-2" 
                                        height="67" width="67" ID="Image2" ImageUrl='<%# Bind("Image5") %>' runat="server" />
                                        <div class="media-body va-middle">
                                            <h4>Balthazar 2 Bedroom</h4>
                                            <h6>Dubai, 00000, United Arab Emirates</h6>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">About this listing</a></li>
                                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">The space</a></li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane active" id="home">
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                                <div class="wl-modal__room-details">
                                                    <span>Room Type</span><span class="pull-right">Entire home/apt</span>
                                                    <hr class="wl-modal-listing__summary-tab-hr">
                                                    <span>Property Type</span><span class="pull-right">Apartment</span>
                                                    <hr class="wl-modal-listing__summary-tab-hr">
                                                    <span>Accommodates</span><span class="pull-right">5</span>
                                                    <hr class="wl-modal-listing__summary-tab-hr">
                                                    <span>Bedrooms</span><span class="pull-right">2</span>
                                                </div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="profile">
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-12">
                            <div class="pull-left h3">Save to Wish List</div>
                            <button type="button" class="btn btn-close close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <!-- End # DIV Form -->
                                    
                </div>
            </div>
        </div>
       
        <!-- END # MODAL LOGIN -->

                                        <div class="GridLex-col-3_sm-4_xs-6_xss-12 col-md-6 col-sm-6 col-xs-12">
                                            <div class="top-destination-item">
                                                <a href="#">
                                                    <!-- Carousel -->
                                                    <div id="<%#"carousel-example-generic" + Convert.ToString(Eval("P_Id"))%>" class="carousel slide"
                                                        data-ride="carousel" data-interval="false">
                                                        <div class="carousel-inner">
                                                            <div class="item active">
                                                                <asp:Image ID="Image3" Height="252px" Width="370px" ImageUrl='<%# Bind("Image") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                            <div class="item">
                                                                <asp:Image ID="Image4" Height="252px" Width="370px" ImageUrl='<%# Bind("Image1") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                            <div class="item">
                                                                <asp:Image ID="Image5" Height="252px" Width="370px" ImageUrl='<%# Bind("Image2") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                            <div class="item">
                                                                <asp:Image ID="Image6" Height="252px" Width="370px" ImageUrl='<%# Bind("Image3") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                            <div class="item">
                                                                <asp:Image ID="Image7" Height="252px" Width="370px" ImageUrl='<%# Bind("Image4") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                            <div class="item">
                                                                <asp:Image ID="Image8" Height="252px" Width="370px" ImageUrl='<%# Bind("Image5") %>'
                                                                    runat="server" alt="Top Destinations" />
                                                            </div>
                                                        </div>
                                                        <!-- Controls -->
                                                        <a class="left carousel-control" href="#<%#"carousel-example-generic" + Convert.ToString(Eval("P_Id"))%>"
                                                            data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                                                        <a class="right carousel-control" href="#<%#"carousel-example-generic" + Convert.ToString(Eval("P_Id"))%>"
                                                            data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                                                        <div class="wishlist-popup">
                                                            <a data-toggle="modal" href="#WishlistModal"><i class="fa fa-heart-o" aria-hidden="true">
                                                            </i></a>
                                                        </div>
                                                    </div>
                                                    <!-- /carousel -->
                                                    <div class="content">
                                                        <div class="row gap-10">
                                                            <a href="#">
                                                                <div class="col-xs-7 place">
                                                                    <h4>
                                                                        <i class="fa fa-inr" aria-hidden="true"></i><span>
                                                                            <%# Convert.ToString(Eval("Cost"))%></span> / Day
                                                                    </h4>
                                                                    <p>
                                                                        <%# Convert.ToString(Eval("Name"))%></p>
                                                                </div>
                                                                <div class="col-xs-5 price">
                                                                    <p>
                                                                        <%# Convert.ToString(Eval("N_BedRooms"))%>
                                                                        Bed Room</p>
                                                                    <p class="icon">
                                                                        <i class="ri ri-chevron-right-circle"></i>
                                                                    </p>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </ItemTemplate>
                                </asp:Repeater>

 

#WishlistModal .modal-content{
       width: 820px;
    padding: 0;
    border: 0;
        min-height: 500px;

}
#WishlistModal .modal-dialog{
    width: 920px;
}
#WishlistModal .modal-dialog img{
    min-height: 500px;
}
#WishlistModal  .modal-content .btn-close {
    top: 27px;
    right: 12px;
}

PopUp Working Correctly But I'm genarating popup in Repeater So Each have to Each div id for showing popup of each item, here my popup div id="WishlistModal" below i mentioned <a href="#WishlistModal"> when a href clicked that popup will show..

I'm generating wishlist div id dynamically for each item in repeater using below code "<%#"Wishlist" + Convert.ToString(Eval("P_Id"))%>"

but what happend is that div id="wishlist" have Css class #Wishlist,that is not changing to .Wishlist ,so dynamically we cant generate Css,show popup not displying properly,so how to overcome this ..???

You are viewing reply posted by: Indresh 2 months ago.
Posted 2 months ago

Hi naidu.6180,

You need to define your css width: 90% !important; and as per your requirement width and you need to change both place model-content as well as model-dialog.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html