1

First of all I am a newbie to asp so may be the question is too silly but still I am not being able to add the dropdown list to my web pages after using materialize.css .Without it dropdown is working fine but on linking the files of materialize it is not working.I have tried adding both the dropdown lists from the toolbox as well as the one belonging to materialize but it is not getting displayed although the code is present.How to solve this?
Here is code snippet of my master page with a dropdown added from toolbox `

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
    <link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <style>
        .wraped {
            margin-top:10px;
            margin-left:20px;
            margin-right:20px;
        }
        </style>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div class="wraped">
    <div class="container" style="width:80%">
    <form id="form1" runat="server">
        <div class="row">
            <!--Navbar-->
            <div class="col s4">
                <asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
                </div>
            <div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
                <asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
                    <StaticHoverStyle BackColor="#003300" ForeColor="White" />
                    <StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
                </div>
        <!--Content-->
    <div class="col s12" style="margin-top:20px;">
        <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList><!--Here is the drop down-->
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
            </div>
    </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

` And this is the code snippet with dropdown list of materialize

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
    <link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <style>
        .wraped {
            margin-top:10px;
            margin-left:20px;
            margin-right:20px;
        }
        </style>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div class="wraped">
    <div class="container" style="width:80%">
    <form id="form1" runat="server">
        <div class="row">
            <!--Navbar-->
            <div class="col s4">
                <asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
                </div>
            <div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
                <asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
                    <StaticHoverStyle BackColor="#003300" ForeColor="White" />
                    <StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
                </div>
        <!--Content-->
    <div class="col s12" style="margin-top:20px;">
        <div class="input-field">
    <select>
      <option value="" >Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div><!--Here is the drop down-->

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
            </div>
    </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

I am using Visual Studio 12

Sourajit
  • 193
  • 1
  • 14
  • Check this answer: http://stackoverflow.com/questions/38170589/select-option-does-not-work-in-rails-using-materializecss/38175041#38175041. I believe that your problem is the same. – Allan Pereira Jul 06 '16 at 19:42
  • The problem is that the dropdown list is not getting displayed! ,that space is displayed completely blank..while on inspect element it is showing the code...and I have also used jquery initialization but it is still the same – Sourajit Jul 07 '16 at 06:25

2 Answers2

0

Use CssClass="browser-default" inside the DropDownList tag.

Rohit sethi
  • 1
0

You can use

class="browser-default z-depth-5"

for asp dropdownlist control.

Kostas Charitidis
  • 2,991
  • 1
  • 12
  • 23
Dennis Tirkey
  • 1
  • 1