Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Is there anyway to add a normal html select box to your modal window?

garethdebruyn pro asked 7 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 7 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 7 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 7 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 7 years ago

Just like this will work. Thanks, Sylvain

Marta Wierzbicka staff answered 7 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 7 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 7 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 7 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 7 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 7 years ago

Awesome, will do. Thank you Marta.

Marta Wierzbicka staff commented 7 years ago

No problem. I'm waiting for your message.

Marta Wierzbicka staff answered 7 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 7 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.


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