Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Dynamicallly add attribute to top level element of component

Avatar

Avatar
Boost 1
Level 1
akatsuki07
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Validate 1
View profile

Avatar
Boost 1
Level 1
akatsuki07
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Validate 1
View profile
akatsuki07
Level 1

30-04-2021

Use Case:

I'm trying to implement bootstrap like row's and columns where the rows component can have column components as childs. The column component dialog should be able to have dynamic width sizes set by the author (25%, 33%, 50%).

 

Problem:

In order for me to dynamically set the column width's I would have to add it to the top level element (div class='column') but I'm not sure how to do this.

HTML for my ROW component:

<div class="row">
    <sly data-sly-resource="${'row-parsys' @ resourceType='wcm/foundation/components/parsys'}"></sly>
</div>


HTML for my COLUMN component:

<sly data-sly-resource="${'col-parsys' @ resourceType='wcm/foundation/components/parsys'}">
</sly>


Code generated in the DOM when I add column within row component parsys:

<div class="row">
   <div class="column"></div>
   <div class="column"></div>
</div>

 
How can I dynamically pass in column widths to the column component div so it looks like this:

<div class='row'>
    <div style='width: 25%;' class='column'></div>
    <div style='width: 50%;' class='column'></div>
</div>


The only other solution I can think of is have multiple column components with set sizes. I would like to do this with one component which can be authored to different sizes.

View Entire Topic

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

03-05-2021

@akatsuki07,

I recommend you provide the author with preset values in the touch UI dialogue options. Since you are using bootstrap, these options will be column numbers, from 1-12 example:

 + 4, 4, 4

 + 2, 8, 2

 + 3, 4, 5

 

Then as you are writing sightly, you can simply do something like:

<div class="col-${author.col1}"></div>
<div class="col-${author.col2}"></div>
<div class="col-${author.col3}"></div>

 I hope this helps!