tweak td sizing to be dynamic

This commit is contained in:
Rachid Mrad 2025-03-06 15:18:18 -05:00
parent 958b68a504
commit 56c4b5381e
No known key found for this signature in database
2 changed files with 9 additions and 4 deletions

View file

@ -142,17 +142,22 @@ export class NameserverForm {
let ipInput = document.getElementById(`id_form-${formIndex}-ip`);
if (serverInput && ipInput) {
let ipParent = ipInput.parentElement; // Get the parent element of ipInput
let ipTd = ipParent.parentElement;
// add an event listener on the server input that adjusts visibility
// and value of the ip input (and its parent)
serverInput.addEventListener("input", () => {
let serverValue = serverInput.value.trim();
if (ipParent) {
if (ipParent && ipTd) {
if (serverValue.endsWith('.' + this.domain)) {
showElement(ipParent); // Show IP field if the condition matches
ipTd.classList.add('width-40p');
} else {
hideElement(ipParent); // Hide IP field otherwise
ipTd.classList.remove('width-40p');
ipInput.value = ""; // Set the IP value to blank
}
} else {
console.warn("Expected DOM element but did not find it");
}
});
}

View file

@ -5,8 +5,8 @@
{% block domain_content %}
{# this is right after the messages block in the parent template #}
{% if formset.total_form_count >= formset.max_num %}
{# this is right after the messages block in the parent template. We use > not >= to account for the blank form. #}
{% if formset.total_form_count > formset.max_num %}
<div class="usa-alert usa-alert--info usa-alert--slim" role="alert">
<div class="usa-alert__body">
<p class="usa-alert__text">
@ -200,7 +200,7 @@
{% endwith %}
{% endwith %}
</td>
<td class="text-bottom width-40p">
<td class="text-bottom">
{% with attr_required=True add_initial_value_attr=True label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label add_group_class="margin-top-0" %}
{% input_with_errors form.ip %}
{% endwith %}