Dropdowns with a Label


Topic: Dropdowns with a Label

Ryan Ternier asked 7 years ago

What would be the appropriate markup for a DropDown with a label? ie. when you're using a dropdown for say a list of countries.

For example, when filling out a form, a user could enter name, email, etc. When it comes to a dropdown, say a country drop down, the formatting of MDBootstrap doesn't easily lend itself for this style of data input.

I've worked out a few styles, but it's pretty bastardized to get it work work with the MDbootstrap input & hover labels.


Marta Szymanska staff pro premium answered 7 years ago

Hi, Check out our multiselect: https://mdbootstrap.com/javascript/bootstrap-multiselect/#basic-example . It works fine. Best, Marta

Perfect! Didn't even realize these controls lived under the Javascript section :) Thanks.

The control isn't rendering any of the options that are added through Angular ng-repeat.  Is there a way to refresh the control to show these?

In  my angular app I've destroyed and recreated the select at the very last step, but it still isn't loading new items. If I manually do the destroy/create command in the consol it works though, but this isn't a good solution.


de Ville answered 6 years ago

Hello, Here is my situation: On a dropdown type of field, I added an md-outline. How would it be possible to have the label in the frame when the field is not empty? Goal is to have the same layout as a text type of field. Thanks in advance, best regards


Marta Szymanska staff pro premium answered 6 years ago

Hi,

would you present your code showing what you try to achieve in the snippet here: https://mdbootstrap.com/snippets/? I'll try to help you with improving this code.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No