Show a text field and HTML Block in the same line if continue next element is not working.

[thead]

I want to show a text field and HTML Block  in the same line. I have tried enabling the continue next element but it is not working as expected. My HTML Block consist of the following codes: 

<span id="row[@field:TeacherID]">[@field:S1_DistrictFunded_Para^]</span>

<script>

if("[@field:S1_DistrictFunded_Para^]" == "Yes") {
document.getElementById("row[@field:TeacherID]").style.color="#444";
document.getElementById("row[@field:TeacherID]").style.fontWeight="500";
document.getElementById("row[@field:TeacherID]").style.backgroundColor="#fcbea0";
document.getElementById("row[@field:TeacherID]").style.padding="4px 4px 4px 4px";
document.getElementById("row[@field:TeacherID]").style.borderRadius="3px";
document.getElementById("row[@field:TeacherID]").style.width="100px";
document.getElementById("row[@field:TeacherID]").style.display="block";
document.getElementById("row[@field:TeacherID]").style.textAlign="center";
document.getElementById("row[@field:TeacherID]").style.fontSize="13px";

}

else if("[@field:S1_DistrictFunded_Para^]" == "No") {
document.getElementById("row[@field:TeacherID]").style.color="#444";
document.getElementById("row[@field:TeacherID]").style.fontWeight="500";
document.getElementById("row[@field:TeacherID]").style.backgroundColor="#A7E1B9";
document.getElementById("row[@field:TeacherID]").style.padding="4px 8px 4px 8px";
document.getElementById("row[@field:TeacherID]").style.borderRadius="3px";
document.getElementById("row[@field:TeacherID]").style.width="100px";
document.getElementById("row[@field:TeacherID]").style.display="block";
document.getElementById("row[@field:TeacherID]").style.textAlign="center";
document.getElementById("row[@field:TeacherID]").style.fontSize="13px";

}

</script>
Is this possible or is there any workaround to achieve this? 

 

Thank you.

[April]

Hi Thead,

Yes, that is possible. You just need to replace your HTML Block code into this:

<span id="row[@field:TeacherID]">[@field:S1_DistrictFunded_Para^]</span>

<script>

if("[@field:S1_DistrictFunded_Para^]" == "Yes") {
document.getElementById("row[@field:TeacherID]").style.color="#444";
document.getElementById("row[@field:TeacherID]").style.fontWeight="500";
document.getElementById("row[@field:TeacherID]").style.backgroundColor="#fcbea0";
document.getElementById("row[@field:TeacherID]").style.padding="4px 4px 4px 4px";
document.getElementById("row[@field:TeacherID]").style.borderRadius="3px";
document.getElementById("row[@field:TeacherID]").style.width="100px";
document.getElementById("row[@field:TeacherID]").style.display="inline-block";
document.getElementById("row[@field:TeacherID]").style.textAlign="center";
document.getElementById("row[@field:TeacherID]").style.fontSize="13px";

}

else if("[@field:S1_DistrictFunded_Para^]" == "No") {
document.getElementById("row[@field:TeacherID]").style.color="#444";
document.getElementById("row[@field:TeacherID]").style.fontWeight="500";
document.getElementById("row[@field:TeacherID]").style.backgroundColor="#A7E1B9";
document.getElementById("row[@field:TeacherID]").style.padding="4px 8px 4px 8px";
document.getElementById("row[@field:TeacherID]").style.borderRadius="3px";
document.getElementById("row[@field:TeacherID]").style.width="100px";
document.getElementById("row[@field:TeacherID]").style.display="inline-block";
document.getElementById("row[@field:TeacherID]").style.textAlign="center";
document.getElementById("row[@field:TeacherID]").style.fontSize="13px";

}

</script>

 

Hope this helps.

[thead]

Hello, that works on my end but I have one more question. How can I change the color of the text inside the button?

[April]

Hi Thead,

To change the color of the text inside the button, you need to add font color on the custom code , you may add these two lines to change the color:

 

In the first criteria:
 

document.getElementById("row[@field:TeacherID]").style.color="white";

In the second criteria:

document.getElementById("row[@field:TeacherID]").style.color="red";

 

Please note that you may change the color based on your preferred color.

Hope this helps.

[GoodBoy]

On 6/24/2022 at 12:29 AM, thead said:

document.getElementById("row[@field:TeacherID]").style.display="block";

Just to add, this line is the reason why the continue next element in the same line is not working. Please note that the 'block' property adds a line-break before and after an element while 'inline-block' property does not add, thus we should use it instead so the HTML block can be in-line with other fields.