Customizing a Separator with a CSS class

Contains tips for configurators working with Aware IM
Post Reply
ACDC
Posts: 1138
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Customizing a Separator with a CSS class

Post by ACDC »

Sometimes you may want to include a background in your separator or make the borders invisible . I use this often when using applicability rules to hide attributes as opposed to READ PROTECT - I place the attributes inside a separator and then make the separator invisible, but still there - it's much faster and more efficient - also run the applicability rule as dynamic on the form using a yes/no attribute based rule on the object

If you wish to do this , place the following code in the render script section of the advanced button on the form and then add the custom settings to your custom MyClass css file

Advanced Button (Render Script section):
---------------------------------------------------------------
var field = parser.getField ("Address1");
var id = field.getId ();

var separator = $("#" + id).closest ("fieldset");
separator.addClass ("MyClass");
------------------------------------------------------------
(The above var field needs to know at least one attribute name placed inside the separator to be customised, I am using "Address1" in this example))
customaware
Posts: 2391
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: Customizing a Separator with a CSS class

Post by customaware »

Have loaded this up credited to ACDC and added a couple of screenshots and a sample BSV and CSS to https://awareimdevelopers.com
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Customizing a Separator with a CSS class

Post by PointsWell »

Hi - have taken the plunge to try and control separators and

Code: Select all

! important
in my CSS is essential!

Also - I need to use this for a separator that has a referenced grid within it, the getField method doesn't work because a grid is obviously not a field. How would I use the equivalent to identify the grid within the separator (fieldSet)?

I've been trawling the Kendo docs and it's given me a sore head but no clues.

Thanks
tford
Posts: 4238
Joined: Sat Mar 10, 2007 6:44 pm

Re: Customizing a Separator with a CSS class

Post by tford »

Mark,
Have loaded this up credited to ACDC and added a couple of screenshots and a sample BSV and CSS to https://awareimdevelopers.com
for some reason I can't find it on AwareIM Developers. Can you post the specific link?
Tom - V8.8 build 3137 - MySql / PostGres
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Customizing a Separator with a CSS class

Post by PointsWell »

customaware
Posts: 2391
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: Customizing a Separator with a CSS class

Post by customaware »

Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Customizing a Separator with a CSS class

Post by Jaymer »

those links dont work
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
customaware
Posts: 2391
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: Customizing a Separator with a CSS class

Post by customaware »

They were on the old site....

Try this...


https://awareimdevelopers.com/tipsntric ... d-by-acdc/

However, I have just realised that there is a problem with the site. Will fix shortly.
Last edited by customaware on Tue Jul 07, 2020 1:26 am, edited 1 time in total.
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
ACDC
Posts: 1138
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Re: Customizing a Separator with a CSS class

Post by ACDC »

Also - I need to use this for a separator that has a referenced grid within it, the getField method doesn't work because a grid is obviously not a field. How would I use the equivalent to identify the grid within the separator (fieldSet)?
In this case, I place a shortcut in the separator area and then disable label so you cannot see the attribute on the form. The invisible attribute serves the purpose of identifying the separator
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Customizing a Separator with a CSS class

Post by Jaymer »

ACDC
I WANT TO SAY THANKS for this.
Brilliant.

Until you're deep in the bowels of look and feel, you won't realize the LACK of ability to style this particular item.
I desperately needed to remove a lot of wasted space to tighten up the display and this fit the bill. Bravo!
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Customizing a Separator with a CSS class

Post by Jaymer »

ACDC wrote:
Also - I need to use this for a separator that has a referenced grid within it, the getField method doesn't work because a grid is obviously not a field. How would I use the equivalent to identify the grid within the separator (fieldSet)?
In this case, I place a shortcut in the separator area and then disable label so you cannot see the attribute on the form. The invisible attribute serves the purpose of identifying the separator
Again, Brilliant. I also needed this.
But I don't understand how you make the shortcut invisible. Yes, I turned off the label.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
ACDC
Posts: 1138
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Re: Customizing a Separator with a CSS class

Post by ACDC »

But I don't understand how you make the shortcut invisible. Yes, I turned off the label
apologies for the late reply on this, but when you insert a shortcut attribute on a form there is no text box present, it shows the content only. So if you turn off the label and make sure the content of the shortcut attribute is undefined, it will then appear invisible. Alternatively setting the shortcut style, text and background using the presentation option could also make it invisible
Post Reply