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

Coral Ui 3 Component.

Avatar

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

51 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

51 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile
imadullakhan
Level 2

26-07-2020

Hi @All,

 

I have one query like, In my component i have one image on right side and text will b on left side. So my requirement is the image and Text  location is not fixed i have to add that image into left side or right side same for text also. How i need to build the components like this can anyone help me here please.  

View Entire Topic

Avatar

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

192 likes

Total Posts

166 posts

Correct Reply

53 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

192 likes

Total Posts

166 posts

Correct Reply

53 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

26-07-2020

Hi @imadullakhan , 

This is pretty simple requirement and you can easily achieve this in a single component.

You can follow the below steps. 

1. Create a component which has dropdown to choose image or text. 

2 Based on dropdown selection it's respective place holder can appear, say when you choose image, placeholder to drop an image, alt text box etc and when you choose text a simple text box or richtext. 

3. You can use OOTB column control to divide the layout 5O% (you can choose option available in column control) 

4. Add a custom component created(step 1)inside column control. Considering 50-50 layout. Add it twice. Left and right side. 

5. Choose image on left side of component and text on right side of component or vise versa. You can achieve image-image, image-text, text-image, text-text any of this combination.