Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is that the height of the div is divided equally among all rows, resulting in larger padding than desired. I am looking for a solution to reduce the padding by selecting different options. To better illustrate the problem, below are some images:
https://i.sstatic.net/MGfcY.png Undesired display
https://i.sstatic.net/tdvVh.png When I change the procedimento_row div height to 30px or fit-content, the padding decreases but still fills the entire div space
https://i.sstatic.net/lWqSL.png This is how I expect the height and padding to appear once a subgroup is selected
Below is the function responsible for generating the rows:
$("body").on("change", "#subgrupo_procedimento", function() {
var procedimento = "";
$.get("/procedimento/procedimentos-por-subgrupo/" + $("#subgrupo_procedimento").val(), function(data) {
for (let i = 0; i < data.length; i++) {
procedimento += '<div class="row procedimento_row">';
procedimento += '<span class="col-md-1 procedimento_options">';
procedimento += '<input class="cb" type="checkbox" name="procedimentos" value="'+data[i].id+'">';
procedimento += '</span>';
procedimento += '<span class="col-md-3 procedimento_options">';
procedimento += data[i].codigoTuss;
procedimento += '</span>';
procedimento += '<span class="col-md-6 procedimento_options" data-toggle="tooltip" data-placement="top" title="'+data[i].descricao+'">';
procedimento += data[i].descricao;
procedimento += '</span>';
procedimento += '<span class="col-md-2 procedimento_options">';
procedimento += data[i].valorPreferencial.toFixed(2).replace(".", ",");
procedimento += '</span>';
procedimento += '</div>';
}
$("#procedimento_table").append(procedimento);
});
});
The "procedimento_row" divs are nested inside a container called "procedimento_table". Here is the CSS for procedimento_table:
#procedimento_table {
width: 100%;
height: 300px;
overflow-y: scroll;
margin-right: 0 !important;
margin-left: 0 !important;
}