Learn It
Rank: #8626
5Views
9Comments
Solved
Auto align containers in different devices
Question
Mobile
CSS
Application Type
Mobile

Hi Guys,

I am trying to create a dashboard as shown in the screenshot below. How can i auto adjust the height of each vertical container so that it spreads around the device properly. Please note, i dont want to have same height for each of them. In the screenshot what i tried was, i put 40% on 1st container "Text as Balance" , 2nd container "Signal" with 30% and 3rd container "Update Logs" with 30% and i expected it to expand itself in full screen when viewed in Tab or Mobile. But didnt work.

Could you please help on this. Also i want to auto adjust the texts as well based on the size of each container. If that is possible.

Thanks

Siva Kumar

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72
Solution

Hi Siva,

I have tried the mentioned use-case in a sample app.

Check this: Mobile View | Tablet View


Widget Tree View:


CSS Snippet:

.outerCntr {
    height: 100%;
    text-align: center;
    font-size: xx-large;
    padding: 8% 7% 15%;
}

.firstCntr {
    border: 1px solid green;
    height: 40%;

}

.secondCntr {
    border: 1px solid blue;
    height: 30%;
}

.thirdCntr {
    border: 1px solid brown;
    height: 30%;
}

.contentMiddle {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0% 0% 3%;
}

Note: I didn't include any inline CSS style for this implementation.

Let me know, in case if you need the .oml file for reference.

Hope this helps you!


Kind regards,

Benjith Sam

See solution in context
1
0
on 23th Jan
Copy link to comment
Learn It
Rank: #8626

Hi Benjith,

This worked for me. Now, how can i make the fonts and images inside expand and compress in the same proportion?

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72

Replying to siva kumar's comment on 23 Jan 2021 11:37:52

Hi Siva,

You can define custom CSS rules specific to Device Type i.e. Phone or Tablet referring/chaining to the .phone and .tablet style class.

Check this: Mobile View | Tablet View


CSS Snippet:

.tablet .outerCntr { 
    background: antiquewhite;
    font-size: xxx-large;
}

.phone .outerCntr { 
    background: aquamarine;
    font-size: x-large;
}


Hope this helps you!


Kind regards,

Benjith Sam

0
0
on 23th Jan
Copy link to comment
Kadu Borges
Rank: #493

Nice work, Benjith.

.outerCntr {
    height: 100%;

This is exactly what I meant when I wrote "the container in which all the three elements are inside of has its height fixed". Probably using a style class could override properly the original style.

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72

Replying to Kadu Borges' comment on 23 Jan 2021 12:05:40

Thanks Kadu!

Very true, Defining a style class and referring the same to override the default styling is more preferred than defining inline CSS to the html element. Happy to help :)


Kind regards,

Benjith Sam

0
0
on 23th Jan
Copy link to comment
Kadu Borges
Rank: #493

Hi Siva Kumar,

The problem is probably that the container in which all the three elements are inside of has its height fixed.

Hope it helps.

Best regards.

0
0
on 23th Jan
Copy link to comment
Learn It
Rank: #8626

No, I have kept the height of parent container to 100% 

0
0
on 23th Jan
Copy link to comment
Kadu Borges
Rank: #493
0
0
on 23th Jan
Copy link to comment
Learn It
Rank: #8626

Replying to Kadu Borges' comment on 23 Jan 2021 10:48:15

Unfortunately, i cant. Since i am in our enterprise server, we are not supposed to export oml files

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72
Solution

Hi Siva,

I have tried the mentioned use-case in a sample app.

Check this: Mobile View | Tablet View


Widget Tree View:


CSS Snippet:

.outerCntr {
    height: 100%;
    text-align: center;
    font-size: xx-large;
    padding: 8% 7% 15%;
}

.firstCntr {
    border: 1px solid green;
    height: 40%;

}

.secondCntr {
    border: 1px solid blue;
    height: 30%;
}

.thirdCntr {
    border: 1px solid brown;
    height: 30%;
}

.contentMiddle {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0% 0% 3%;
}

Note: I didn't include any inline CSS style for this implementation.

Let me know, in case if you need the .oml file for reference.

Hope this helps you!


Kind regards,

Benjith Sam

1
0
on 23th Jan
Copy link to comment
Learn It
Rank: #8626

Hi Benjith,

This worked for me. Now, how can i make the fonts and images inside expand and compress in the same proportion?

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72

Replying to siva kumar's comment on 23 Jan 2021 11:37:52

Hi Siva,

You can define custom CSS rules specific to Device Type i.e. Phone or Tablet referring/chaining to the .phone and .tablet style class.

Check this: Mobile View | Tablet View


CSS Snippet:

.tablet .outerCntr { 
    background: antiquewhite;
    font-size: xxx-large;
}

.phone .outerCntr { 
    background: aquamarine;
    font-size: x-large;
}


Hope this helps you!


Kind regards,

Benjith Sam

0
0
on 23th Jan
Copy link to comment
Kadu Borges
Rank: #493

Nice work, Benjith.

.outerCntr {
    height: 100%;

This is exactly what I meant when I wrote "the container in which all the three elements are inside of has its height fixed". Probably using a style class could override properly the original style.

0
0
on 23th Jan
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72

Replying to Kadu Borges' comment on 23 Jan 2021 12:05:40

Thanks Kadu!

Very true, Defining a style class and referring the same to override the default styling is more preferred than defining inline CSS to the html element. Happy to help :)


Kind regards,

Benjith Sam

0
0
on 23th Jan
Copy link to comment