5
Views
9
Comments
Solved
Auto align containers in different devices
Question
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

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

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?

mvp_badge
MVP
Rank: #72

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

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.

mvp_badge
MVP
Rank: #72

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

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.

Rank: #8626

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

Rank: #493
Rank: #8626

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

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

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?

mvp_badge
MVP
Rank: #72

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

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.

mvp_badge
MVP
Rank: #72

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