locked
DropDownList control and MDB (Material Design Bootstrap) RRS feed

  • Question

  • User1478071981 posted

    Hi,

    I'm developing a web application using a customization based on Bootstrap (Material Design Bootstrap).
    The problem that I'm having is that DropDownList control becomes invisible even if the "visible" property is set to "true".
    That DropDownList is loaded with some values read from a SQL table at runtime (code-behind, C#).
    I confess I'm not a big expert with web application (I develop win32/64 applications mainly) but this thing is really making me scratching my head !
    The same thing happen with Checkboxes.

    This is the whole code of the page (I put a DropDownList with just an Item to try):

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="ConComm.login" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1"  %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
      
      <!-- Font Awesome -->
      <!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"> -->
      <link rel="stylesheet" href="../../Content/fontawesome-all.css">
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" href="../../css/bootstrap.min.css">
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" href="../../css/mdb.min.css">
      <!-- Animations -->
      <link rel="stylesheet" href="../../css/modules/animations-extended.min.css">
    
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:scriptmanager id="ScriptManager1" runat="server">
            </asp:scriptmanager>
                    
            <cc1:modalpopupextender id="modalMsg" runat="server"             
                targetcontrolid="lkPass" popupcontrolid="pnOK">
            </cc1:modalpopupextender>        
            
            <cc1:modalpopupextender id="modalError" runat="server"             
                targetcontrolid="LinkButton1" popupcontrolid="pnError">
            </cc1:modalpopupextender>        
            
            <!-- target per modalError -->
            <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>
            
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem Text="Prova" ></asp:ListItem>
            </asp:DropDownList>
    
            <asp:Panel id="Panel3"  runat="server" >
               <div id="Panel2" class="modal-dialog cascading-modal" role="document">                
                    <div class="modal-content">
                        <div class="modal-header light-blue darken-3 white-text text-center">
                            <h4 class="">Login</h4>
                        </div>
                        <div class="modal-body mb-0">
                            <div class="md-form form-sm">
                                <i class="fas fa-user prefix"></i>
                                <asp:TextBox ID="tbUser" runat="server" class="form-control form-control-sm" placeholder="Username" autofocus="autofocus"></asp:TextBox>                            
                            </div>
                            <div class="md-form form-sm">
                                <i class="fas fa-lock prefix"></i>
                                <asp:TextBox ID="tbPwd" TextMode="Password" runat="server" class="form-control form-control-sm" placeholder="Password"></asp:TextBox>                            
                            </div>
                            <div class="text-center">
                                <asp:LinkButton class="d-block kbd" ID="lkPass" runat="server" Font-Names="Calibri" ForeColor="#0066FF" OnClick="lkPass_Click" >Hai dimenticato la password?</asp:LinkButton>                      
                            </div>
                            <br />
                            <div class="text-center mt-1-half">                            
                                <asp:Button ID="btConferma" runat="server" Text="Conferma" class="btn btn-info mb-1" OnClick="btConferma_Click" CausesValidation="false" />                 
                            </div>
                        </div>
                    </div>
               </div>
            </asp:Panel>
            
            <asp:Panel ID="pnOK" runat="server" Style="display: none">
                <div class="modal-dialog modal-notify modal-success" role="document">
                    <!--Content-->
                    <div class="modal-content">
                      <!--Header-->
                      <div class="modal-header">
                        <p class="heading lead">Nuova Password</p>
    
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true" class="white-text">&times;</span>
                        </button>
                      </div>
    
                      <!--Body-->
                      <div class="modal-body">
                        <div class="text-center">
                          <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                          <p>Una nuova password è stata generata ed è stata inviata alla tua casella di posta</p>
                        </div>
                      </div>
    
                      <!--Footer-->
                      <div class="modal-footer justify-content-center">
                        <!--<a type="button" class="btn btn-success">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                        <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>-->
                        <asp:Button ID="btOK" runat="server" Text="OK" class="btn btn-success" OnClick="btOK_Click"/>
                      </div>
                    </div>
                    <!--/.Content-->
                </div>  
           </asp:Panel>
    
           <asp:Panel ID="pnError" runat="server" Style="display: none">
                <div class="modal-dialog modal-notify modal-danger" role="document">
                    <!--Content-->
                    <div class="modal-content">
                      <!--Header-->
                      <div class="modal-header">
                        <p class="heading lead">Errore</p>
    
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true" class="white-text">&times;</span>
                        </button>
                      </div>
    
                      <!--Body-->
                      <div class="modal-body">
                        <div class="text-center">
                          <i class="fas fa-close fa-4x mb-3 animated rotateIn"></i>
                          <p>Username o password errati</p>
                        </div>
                      </div>
    
                      <!--Footer-->
                      <div class="modal-footer justify-content-center">
                        <!--<a type="button" class="btn btn-success">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                        <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>-->
                        <asp:Button ID="btCloseError" runat="server" Text="OK" class="btn btn-danger" OnClick="btCloseError_Click"/>
                      </div>
                    </div>
                    <!--/.Content-->
                </div>  
           </asp:Panel>
    
        </form>
    
      <!-- SCRIPTS -->
      <!-- JQuery -->
      <script src="../../js/jquery-3.3.1.min.js"></script>
      <!-- Bootstrap tooltips -->
      <script type="text/javascript" src="../../js/popper.min.js"></script>
      <!-- Bootstrap core JavaScript -->
      <script type="text/javascript" src="../../js/bootstrap.js"></script>
      <!-- MDB core JavaScript -->
      <script type="text/javascript" src="../../js/mdb.min.js"></script>
    
    </body>
    /html>
    

    Probably it's my fault, I'm doing some mistake but I can't find where.
    Thank, regards.

    Roberto

    Sunday, March 17, 2019 10:46 AM

Answers

  • User839733648 posted

    Hi washburn_it,

    According to your description and code, I'm sorry that I could not reprodcue your issue.

    I've tested your code on my side, but there are two CSS I've not added becasue I'm not clear about those.

      <link rel="stylesheet" href="../../Content/fontawesome-all.css">
      <link rel="stylesheet" href="../../css/modules/animations-extended.min.css">

    The three CSS I've added is from the official website. https://mdbootstrap.com/md-bootstrap-cdn/ 

    Here is my reference.

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet" />
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>

    You could see from the screenshot that the dropdownlist is displayed well on the page.

    I think that maybe the CSS I've not added has made the dropdownlist invisible. 

    The style setting in them may have an effect.

    I suggest that you could comment the reference and check if it has affect the result.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2019 3:05 AM

All replies

  • User839733648 posted

    Hi washburn_it,

    According to your description and code, I'm sorry that I could not reprodcue your issue.

    I've tested your code on my side, but there are two CSS I've not added becasue I'm not clear about those.

      <link rel="stylesheet" href="../../Content/fontawesome-all.css">
      <link rel="stylesheet" href="../../css/modules/animations-extended.min.css">

    The three CSS I've added is from the official website. https://mdbootstrap.com/md-bootstrap-cdn/ 

    Here is my reference.

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet" />
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>

    You could see from the screenshot that the dropdownlist is displayed well on the page.

    I think that maybe the CSS I've not added has made the dropdownlist invisible. 

    The style setting in them may have an effect.

    I suggest that you could comment the reference and check if it has affect the result.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2019 3:05 AM
  • User1478071981 posted

    Hi Jenifer,

    thanks for your help !
    I found that the problem lays with the "<link rel="stylesheet" href="css/mdb.min.css">"...I'm using the PRO version (payware) instead of the free that is the one linked to:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet" />

    Probably there is something different into the "payware" css that causes the issue.
    In fact if I reference all the css as you did to test the page, I can see the DropDownList but the sidebar+navbar menu (that I have in the main page after the login) are missing.
    If I link the "PRO" css the pages appear correct but the DropDownList disappears !
    I think I have to write to their support...

    Roberto

    Monday, March 18, 2019 7:49 AM