Responsive Component Attributes Editor

Responsive DC Editor Animation

Keeping attribute name length under 10-13 characters

This may sound ridiculous, but for quite a while now, my entire Dynamic Components coding M.O. revolved around making sure all of my DC attribute names were under 10-13 characters long.

If the names were longer, they would start wrapping to the next line.   That's bearable when you have a handful of attributes, but when there are hundreds, it becomes very difficult to read.

Why between 10-13?  The Component Attributes Editor uses a variable-width font, meaning the spacing is different depending on which characters you use.


Actually under 8-11 characters!

Keeping names between 10-13 characters can seem like an OK solution, but there's another problem with DCs.  Their attributes are always ordered alphabetically!   So...  if you wish to group different attributes one next to each other for easy reference, or if you want the Component Options interface to be more user friendly, with attribute labels appearing in a coherent order, you have to get creative.

So far, my way of ordering labels is by adding two letters to the beginning of each attribute.  for example 'agAttName' ,'ahAttName'...  Those two characters are very easy to change later, when reordering is needed.  And why characters, you may ask, and not numbers?  Well, DC attributes just cannot being with numbers.

So that leaves me with approximately 8 to 11 characters to play with.  You can imagine how cryptic my attribute names become after a while.  I get things like: ccClearSideInp, ffDoorOpenHInp, onHingePosBot, etc.  Go remember what those mean a few weeks later.


A quick solution...


A Responsive Component Attributes Editor

I really don't know why I didn't come up with this earlier, but today I figured out how to make DC coding so much more comfortable with a simple hack.

"Hacking" the DC plugin

Open manager.css located at:

C:\%AppData%\SketchUp\SketchUp 2018\SketchUp\Plugins\su_dynamiccomponents\css


Copy and paste the following lines to the top of the file.  Hit save and you're done.  You have a responsive editor where you can display long attribute names, all on one line.


/* Responsive Flex DC attributes */
.attribute-label, .attribute-label-selected {
  width: 25% !important;
  word-wrap: normal !important;


I chose here 25% as the width of the columns.  You can choose any other percentage or a fixed pixel value (For example: replace 25% with 50% or with 200px).

There is no need to restart Sketchup to see the changes.  After you save the file, hit F5 and it will refresh the Component Attributes editor window with your changes.


📌 Make sure to make backups of any files you change.

📌 These changes will be overwritten when there is an update to the dynamic components plugin.





Leave a Comment

Optionally add an image (JPEG only)