如何解决有没有办法让我的下拉菜单与它的前辈具有相同的外观？
所以我正在构建一个表格，其中每一行都可以有一个包含额外信息的更多行的下拉列表。问题是，当显示此下拉行时，表格格式完全改变，我尝试将长度设置为表格、行、正文，但到目前为止没有任何效果。
在这里你可以看到之前和之后：https://imgur.com/a/DeQEM1I
有什么帮助吗？谢谢
代码：
js
...
_FetchExtraInfo: function(ev){
// ! Array values must be altered if more arguments are sent from the button
var self = this;
let btn = ev.currentTarget;
let hidden_info = btn.parentElement.parentElement.parentElement.nextElementSibling;
if (hidden_info.style.display != "inline-block") {
let description = btn.childNodes[1].innerHTML;
...
let social_media = btn.childNodes[13].innerHTML;
hidden_info.children[0].children[1].innerHTML = description;
...
hidden_info.children[4].children[3].innerHTML = social_media;
hidden_info.style.display = "inline-block";
btn.style.borderColor = "red";
btn.style.backgroundColor = "red";
btn.lastElementChild.innerHTML = "-";
}
else {
hidden_info.style.display = "none";
btn.style.backgroundColor = "#64b1ba";
btn.style.borderColor = "#64b1ba";
btn.lastElementChild.innerHTML = "+";
}
}
...
html
<table class="table" id="social_programs_table" style="width: 100%;">
<thead class="thead-dark">
<tr>
<th scope="col">Nome da Entidade</th>
<th scope="col">Designação do Projeto</th>
<th scope="col">Duração (meses)</th>
<th scope="col">População-alvo</th>
<th scope="col">Fonte de Financiamento</th>
<th scope="col">Saber Mais</th>
</tr>
</thead>
<!-- ? Loop -->
<t t-set="counter" t-value="2"/>
<t t-foreach="programs" t-as="obj">
<tbody>
<tr>
<th scope="row"><t t-esc="obj.beneficiary_entity" /></th>
<td><t t-esc="obj.name" /></td>
<td><t t-esc="obj.duration" /></td>
<td><t t-esc="obj.target_audience" /></td>
<td><t t-esc="obj.financial_source" /></td>
<td>
<button t-attf-class="btn btn-primary o_get_info_btn" style="background-color: #64b1ba; border-color: white; color: white;">
<span style="display: none;"><t t-esc="obj.description" /></span>
<span style="display: none;"><t t-esc="obj.promoting_entity" /></span>
<span style="display: none;"><t t-esc="obj.beneficiary_entity" /></span>
<span style="display: none;"><t t-esc="obj.email" /></span>
<span style="display: none;"><t t-esc="obj.website" /></span>
<span style="display: none;"><t t-esc="obj.contact" /></span>
<span style="display: none;"><t t-esc="obj.social_media" /></span>
<span style="display: none;"><t t-esc="counter" /></span>
<span class="btn_ui">+</span>
</button>
</td>
</tr>
</tbody>
<tbody class="extra_info_container" style="display: none; background-color: #ededed; width: 100%;">
<tr>
<td><b>Enquadramento do projeto</b></td>
<td class="program_description" colspan="6">description</td>
</tr>
<tr>
<td><b>Entidade Promotora</b></td>
<td colspan="6">entity prom</td>
</tr>
<tr>
<td><b>Entidade beneficiária</b></td>
<td>entity bene</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>email</td>
<td><b>Contacto</b></td>
<td>contact</td>
</tr>
<tr>
<td><b>Website</b></td>
<td>website</td>
<td><b>Rede Social</b></td>
<td>rede social</td>
</tr>
</tbody>
<t t-set="counter" t-value="counter + 1"/>
</t>
<!-- ? End loop -->
</table>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
