1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Is there anyway to add a normal html select box to your modal window?

garethdebruyn pro asked 6 years ago 

Start your code here
<div id="JobType" class="modal fade" data-backdrop="static"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add A Job</h4> <button type="button" class="close ml-auto" data-dismiss="modal" id="xclose"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> </div> <div id="modalBody" class="modal-body"> <select id="ssd" style="z-index:99999"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <center> <button type="button" style="width:220px; height:140px" id="NewJob" class="btn btn-outline-info waves-effect btn-lg"><i class="fa fa-wrench fa-4x" style="font-size:50px; color:lightgray"></i><br /><br />Add Job</button> <button type="button" style="width:220px; height:140px" id="NewQuote" class="btn btn-outline-info waves-effect btn-lg"><i class="fa fa-tasks fa-4x" style="font-size:50px; color:lightgray"></i><br /><br />Add Quote</button> </center> </div> </div> </div> </div>

Marta Wierzbicka staff answered 6 years ago

Hi, did you see this part of documentation: https://mdbootstrap.com/javascript/material-select/#default? You can notice this is a select with no need an initialization but without material design styles. Best, Marta

sylvainadam pro commented 6 years ago

Ah - thank you Marta - I missed this one. That would have been nice that our select wasn't hidden by default :). Also, I would suggest you put the "select" element documentation where all of your inputs are in "Components" -> "Inputs", which is where I was looking at first. Second, I use Zend_Form decorators to generate forms. My checkboxes come in this form: <div class="form-group"> <div class="checkbox"> <label> <input type="hidden" name="activeAccount" value="0"> <input type="checkbox" name="activeAccount" id="activeAccount" value="1" checked="checked"> The account is active </label> <p class="help-block">Untick this box if you want the account not to be active.</p> </div> </div> It's not showing by default. I don't have an easy way to modify the decorators, but from what I've seen the checkbox container isn't right for MDB Bootstrap. Your documentation shows the checkbox input in a .form-group div and nothing else. How can I make that checkbox show? Thanks! Sylvain

Marta Wierzbicka staff answered 6 years ago

Hi, Select like here: https://getbootstrap.com/docs/4.0/components/forms/#form-controls? A specific example, please. Best, Marta

sylvainadam pro commented 6 years ago

Just like this will work. Thanks, Sylvain

Marta Wierzbicka staff answered 6 years ago

Hi,

We want to help you guys but I need to know what exactly you want to get from us. Do you want a select like in the bootstrap documentation here? Please look at this section and input with label "Example select".

Best,
Marta

sylvainadam pro commented 6 years ago

Hello Marta, Thank you for your answer. Well, it's rather simple. I would like to get a select when I add a "select" element, but it's always hidden. How do you get a standard select, or checkbox for that matter? Thanks, Sylvain

sylvainadam pro answered 6 years ago

Hello there,

garethdebruyn, did you have an answer to your question?

I have the same issue: I want to use a standard <select> with a standard Bootstrap layout, and a standard checkbox but none of them show up.

I do not want to have to initialize all of my selects manually with Javascript.

I managed to have my selects display by modifying the mdb.css file and displaying them there, which will not help if I want to use the MDB Select but I'll be good for now.

Thanks,

Sylvain

garethdebruyn pro commented 6 years ago

Hi Sylvain I'm not sure why they did this but it seems like you have to use js to initialize your selects. Also using jquery, I could not find the select using its ID. I don't want to get 75% into my project and find I just cant do something because these guys are doing something strange. Looked to be a great project but its just to risky for me to continue with it. Its very disappointing.

Marta Wierzbicka staff answered 6 years ago

Hi, I really want to help you but the code you pasted here is not enough so could you send me to m.szymanska@mdbootstrap.com any file where you tried to handle with this problem? Best, Marta

garethdebruyn pro commented 6 years ago

Awesome, will do. Thank you Marta.

Marta Wierzbicka staff commented 6 years ago

No problem. I'm waiting for your message.

Marta Wierzbicka staff answered 6 years ago

Hi, could you paste here any demo or visualize the effect you want to achieve? I'll help you. Best, Marta

garethdebruyn pro commented 6 years ago

Hi Marta Thank you. There's no specific visual affect I want. The affect is not the issue. I just want to be able to add a select box to a modal window. But even with a standard select box, it does not show up on a modal window. The other problem I had was that I wanted to add options to the select box dynamically, but i cant even reference the select by ID using jquery. Its like its just not on the page. If I use mdb select I can see the select box displayed with its options I hard coded, if i use a standard select box i cant see it in the modal. But in both cases I cant dynamically add options to the select. With my question i was hoping that i could just get the fact that i cant see the select working first. Then i wanted to sort out the issue that causes me to not be able to reference it.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
garethdebruyn
Pro User 0Support score
1Questions 0Answers 0Snippets