Page 1 of 1
Styling examples
Posted: Mon Apr 28, 2025 3:44 pm
by Uzlander
Hello everyone!
I believe i haven't red the (pdf) guide till the end, but i've been googling for some examples or hints on how to style an object/element the css way.
There are config options including some styling (class and css) for an object but not an example to be seen.
Please those who know gimme link or something. Thanx
Re: Styling examples
Posted: Mon Apr 28, 2025 4:56 pm
by kev1n
Hi,
Just to clarify — are you looking to style an object on specific form, or are you trying to apply styling to a specific object on all forms in general? Let me know, and I can try to point you in the right direction!
Re: Styling examples
Posted: Tue Apr 29, 2025 7:47 am
by Uzlander
For now just just single object on a specific form, although i'll probably wish to apply slightly different styles for some labels (say Commentary field) globally. So please point to both examples
Re: Styling examples
Posted: Tue Apr 29, 2025 10:07 am
by kev1n
Yes, exactly. To style a single object, you can either:
Select
CSS and enter a CSS style, such as
background-color:red or multiple styles like
background-color:red; color:white
or
Choose
Class and enter a class name that you define in the form’s Style field—for example,
fancy-button—or a class name that is defined elsewhere, such as in the Header or an external stylesheet.
class.jpg
fancy.png
Re: Styling examples
Posted: Wed Apr 30, 2025 8:14 am
by Uzlander
And how about addressing Labels (individual) ?
Re: Styling examples
Posted: Wed Apr 30, 2025 8:18 am
by kev1n
Use JavaScript in the form's Custom Code field, e.g.
Code: Select all
function styleObjectLabel(elementId, cssStyle) {
const labelId = `label_${elementId}`;
$(`#${labelId}`).css(cssStyle);
}
// Apply red color and bold font to the label for the element with ID "sus_name"
styleObjectLabel("sus_name", {
color: "red",
fontWeight: "bold"
});
Re: Styling examples
Posted: Wed Apr 30, 2025 8:55 am
by Uzlander
good workaround, thanks kev1n. Ideally it would be good for user be able to apply additional class specificly to Label and thus have such labels styled consistently. I mean here i have some ojects on the form which are read-only (merely informative) and to have them distincty labeled (say a bit smaller fontSize, grayer-color & italic) would be visually nice and somewhat standing out.
This is just an addition to my wishlist for future releases, appreciate it
Re: Styling examples
Posted: Wed Apr 30, 2025 9:59 am
by kev1n
Uzlander wrote: ↑Wed Apr 30, 2025 8:55 am
Ideally it would be good for user be able to apply additional class specificly to Label and thus have such labels styled consistently. I mean here i have some ojects on the form which are read-only (merely informative) and to have them distincty labeled (say a bit smaller fontSize, grayer-color & italic) would be visually nice and somewhat standing out.
This shouldn't be too difficult:
Setup -> Style:
Code: Select all
.readonly-label {
font-size: 0.9em;
color: gray;
font-style: italic;
}
Setup -> Header example:
Code: Select all
// Functions placed here are available anywhere in nuBuilder Forte.
function styleReadonlyLabels(className = "readonly-label") {
$("input[readonly], input:disabled, textarea[readonly], textarea:disabled, select:disabled").each(function () {
const elementId = $(this).attr("id");
if (elementId) {
const labelId = `label_${elementId}`;
$(`#${labelId}`).addClass(className);
}
});
}
// Runs after each Edit Form loads
function nuLoadEditGlobal(formId, formCode) {
styleReadonlyLabels();
}
// Runs after each Browse Form loads
function nuLoadBrowseGlobal(formId, formCode) {
}
// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {
}
// Include external resources:
</script>
<script>