Auto align containers in different devices

Back to Forums

Learn It

Solved

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

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

4 replies

Last reply 23 Jan 2021

Show thread

Hide thread

Learn It

Hi Benjith,

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

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

Kadu Borges

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.

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

Kadu Borges

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.

23 Jan 2021

3 replies

Last reply 23 Jan 2021

Show thread

Hide thread

Learn It

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

23 Jan 2021

Kadu Borges

Replying to siva kumar's comment on 23 Jan 2021 10:37:56

Could you send me the oml file?

23 Jan 2021

Learn It

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

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

4 replies

Last reply 23 Jan 2021

Show thread

Hide thread

Learn It

Hi Benjith,

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

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

Kadu Borges

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.

23 Jan 2021

Benjith Sam

MVP

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

23 Jan 2021

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines