0

I've been looking for ways to use my <asp:LinkButton> as the dropdown control for my <asp:DropDownList> on my asp.net website but the search results always suggest to customize the dropdown list either by <"select"> or <"option">. I have no problems with my <asp:DropDownList> its just that when I apply <CssClass="form-control"> on it, it does not show the arrow which is the indicator that it is indeed a dropdown list (which I guess was not included on the css-template I downloaded):

enter image description here

Here's my code for this:

<div class="col-md-6 pl-1">
  <div class="form-group">
    <asp:Label ID="Label4" runat="server" Text="Branch"></asp:Label>
    <asp:DropDownList ID="ddlBranch" runat="server" CssClass="form-control">
        <asp:ListItem>Calamba</asp:ListItem>
        <asp:ListItem>Tanauan</asp:ListItem>
        <asp:ListItem>San Pablo</asp:ListItem>
    </asp:DropDownList>
  </div>
</div>

Therefore, what I did on my other <asp:DropDrownList> is put it inside a <div class="input-group"> and append an <asp:LinkButton> beside it:

enter image description here

Here's my code for this:

<div class="col-md-5 pr-1">
  <asp:Label ID="Label3" runat="server" Text="Account Type"></asp:Label>
    <div class="input-group">
        <asp:DropDownList ID="ddlAccountType" runat="server" CssClass="form-control" Height="2.7em" OnSelectedIndexChanged="ddlAccountType_SelectedIndexChanged">
            <asp:ListItem>Savings</asp:ListItem>
            <asp:ListItem>Current</asp:ListItem>
            <asp:ListItem>Checking</asp:ListItem>
        </asp:DropDownList>
        <div class="input-group-append">
            <div class="input-group-text">
                <asp:LinkButton ID="btnAccountType" runat="server" Font-Underline="False" ForeColor="Black" CssClass="nc-icon nc-minimal-down" />
            </div>
        </div>
       </div>
    </div>

But of course, when I click the link button, it just reloads the page and it doesn't open the dropdown list. My question is whether there's really a way to connect my <asp:LinkButton> to the <asp:DropDownList> or none? Thank you in advanced for answering my question!

derloopkat
  • 6,232
  • 16
  • 38
  • 45
dororopeach
  • 71
  • 6

1 Answers1

0

UPDATE!!!

I don't know whether this could be considered as a solution but it gave me the result that I wanted anyway, so... What I did was I used <CssClass="accordion"> since the CSS template I downloaded doesn't have a style for that and make my own style for it based on the <CssClass="form-control"> that I have from the template.

CODE ON <style> before </head> (NOTE: I just copied its css from the .form-control class of the template that I have):

<style>
      .accordion {
          background-color: #FFFFFF;
          border: 1px solid #DDDDDD;
          border-radius: 4px;
          color: #66615b;
          line-height: normal;
          height: auto;
          font-size: 14px;
          transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
          box-shadow: none;
      }
          .accordion:focus {
              border: 1px solid #9A9A9A;
              box-shadow: none;
              outline: 0 !important;
              color: #66615B;
          }
  </style>

And then my <asp:DropDownList> code goes like this:

<div class="col-md-5 pr-1">
     <asp:Label ID="Label3" runat="server" Text="Account Type"></asp:Label>
           <div class="form-group">
                 <asp:DropDownList ID="ddlAccountType" runat="server" CssClass="accordion" Height="2.68em" Width="100%">
                      <asp:ListItem>Savings</asp:ListItem>
                      <asp:ListItem>Current</asp:ListItem>
                      <asp:ListItem>Checking</asp:ListItem>
                 </asp:DropDownList>
           </div>
     </div>

This wouldn't be a problem anyway if the ".form-control" class on the template I downloaded also has a style for dropdownlists.

BTW, kudos to the one who edited my question to make it more presentable. I'm actually a newbie in this platform so I'm still not used to some of its functions. Thank you very much!

Thank you also @John for the link! I will go check it, just in case I would need it as a future reference.

dororopeach
  • 71
  • 6