Advanced Form

[SQLGuru]

Another issue I am facing is that I am using the same dropdown list from the forms advanced page (the very first basic drop down).

I have applied “form-control form-control-sm mb-3” as styling classes, but the form-control-sm seems to get ignored altogether and is displaying a regular sized drop down… please advise.

In addition to this, the user has the ability to add more records. In order to achieve this, they have a + button which then uses JS to duplicate the previous row (which contains 2 drop down lists). When the user clicks this button, the drop down list that appears does not have the same formatting as the drop down in the previous row…. but the code is the same… is this perhaps a Bootstrap thing whereby I need to get the drop-down style to repaint after it gets added to the page? if so, assistance in this regard would also help.

Thanks.

---

[Support]

Hello,

Regarding the select2 size:
The class form-control-sm do not works with select2 components. To change the size you need custom CSS. For example:

(css/custom.css):

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
    padding: 0 10px
}
.select2-selection__arrow {
    height: 34px !important;
}

* Feel free to change these values as per your needs.

Regarding clone the select2 field:
Before run the JS code for copy the row, you should destroy the select2 field, this way we will copy the pure HTML of select2. For example:

// Get the current select2 field options and store into a variable. We will use these options to reinitialize the select2 plugin
var selectOptions = $(".my-select-2-field").data('select2').options.options;

// Destroy the current select2 field
$(".my-select-2-field").select2('destroy');

Once you have it destroyed, you can run the code to duplicate the row. Create a callback to run when the new row is rendered on the page, and then reinitialize the first select2 plugin, and initialize the new duplicated select2. For example:

// Reinitialize the main select2 field and also initialize the new duplicated select2 field
$(".my-select-2-field").each(function(){
	$(this).select2( selectOptions );
});

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts