Want to Add space between the 2 fields of the Component.

Avatar

Avatar
Ignite 3
Level 1
dhanubrp
Level 1

Like

1 like

Total Posts

10 posts

Correct reply

0 solutions
Top badges earned
Ignite 3
Ignite 1
Give Back
Boost 1
View profile

Avatar
Ignite 3
Level 1
dhanubrp
Level 1

Like

1 like

Total Posts

10 posts

Correct reply

0 solutions
Top badges earned
Ignite 3
Ignite 1
Give Back
Boost 1
View profile
dhanubrp
Level 1

26-05-2020

 I have a component , I want to add an extra space between the 2 fields. Is there any properties available in AEM to achieve this. (like Width ,height) 

 

Component_Properties.png

 

Thanks in Advance.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

197 likes

Total Posts

243 posts

Correct reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

197 likes

Total Posts

243 posts

Correct reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
Ravi_Pampana
MVP

26-05-2020

Hi,

 

You can create a css file add the custom styles you want and add it to authoring category to reflect the changes.

 

category-name: cq.authoring.dialog.all 

 

Style I added for testing:

.coral-Form--vertical .coral-Form-field.coral3-Textfield {

margin-bottom: 50px;
}

 

Screen Shot 2020-05-26 at 12.20.43 PM.png

 

Otherwise try adding some hidden fields and see you are getting required space

Hope this helps !

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

26-05-2020

Hi @dhanubrp,

Personally, I wouldn't use empty fields as the next developer who comes along will instinctively wonder "why are there empty fields here?". It's not very elegant.

Here is an OOTB method using CSS that you can do in 10s.

On your fields, add the following property:

wrapperClass  --  String  --  padding-b-2

padding-b-2 is an OOTB utility class, so no need to add your own CSS.
wrapperClass will add that class name to the wrapper element.

You could also use the granite:class property with the same value, but it's best to use wrapperClass as a general rule. This is because granite:class adds a class to the actual input and wrapperClass adds a class to the wrapper which contains the input and the label. For bottom padding it makes no difference but you can image that for top padding, if you use granite:class, you'd have padding between the input and label, and nobody wants that 😛 

Here is the result:

Selection_031.jpg

padding-b-2 stands for 2rem of bottom padding, but of course, if you want more or less padding, or if you want to use a margin, etc. you can use a different utility class. Find the list here: http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/sites/page.min.css

This comes with a warning: these utility classes are only usable specifically in dialogs of the Page Editor. If you want to use the same trick somewhere else in the TouchUI, you may have to find another way. 

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

26-05-2020

Hi,

There is no property to add height or width.

All the available properties for text field can be found at https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

 

To add a custom layout, you can add id or class to the field and handle using css

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

 

 

If you just want to add some space between 2 textfields(Textfield2 and Textfield 1) then you can inject an empty heading type field(not a clean solution though) https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

 

Screenshot 2020-05-26 at 9.16.27 PM.png