Log in to AnswerLog in to Follow
Learn It
18Views
10Comments
Solved
Can we have 7 columns in mobile layout
Question
Mobile
Application Type
Mobile

Hi Guys,

I am trying to create a calendar page with bookings inside each day.

First of all, i am not able to add morethan 6 columns which is a showstopper for this case :-)

Is it possible to achieve this without any java coding?

I tried a workaround by adding a Button group with 7 buttons in it to display each day in week. In this case, the layout got pushed outside my phone size and the last day, as per the screenshot "Saturday" is not visible in portrait mode.

Can someone please help me understand how i can set the size of each column to automatically stretch to the phone screen evenly

if there is any CSS class that can automatically align each button, i guess that might work

Thanks

Shiva

0
0
on 13th Jan
Benjith Sam
mvp_badge
MVP
Solution

Hi Shiva,

I have tried a solution for the mentioned use-case. Referred concept - CSS Flexbox

See this Sample App | CustomCalendar

Please refer to the attached .oml file (Check the CSS rules defined in the Screen StyleSheet Section).

Note: I didn't cover the functional implementation, just the UI part.


Hope this helps you!


Kind regards,

Benjith Sam

See solution in context
MobileLabCustomCalendar.oml

2
0
on 13th Jan

Hi Benjith,

Thankyou for the sample file and the solution. Give me sometime to go through the file and see if it is working fine in my application and i will mark the question as solved :-).

Thanks

Siva Kumar

0
0
on 14th Jan
Benjith Sam
mvp_badge
MVP

Replying to siva kumar's comment on 14 Jan 2021 06:04:08

You're welcome, Siva.

No problem, take your time.. Glad to help you :)


Kind regards,

Benjith Sam

0
0
on 14th Jan
Daniël Kuhlmann
mvp_badge
MVP

Hi Shiva,

Why not add 7 containers with each a width of 100%/7.

Regards,

Daniel

1
0
on 13th Jan

I just tried that and the containers are only breaking evenly like 1 col or 2 col etc

0
0
on 13th Jan
Benjith Sam
mvp_badge
MVP
Solution

Hi Shiva,

I have tried a solution for the mentioned use-case. Referred concept - CSS Flexbox

See this Sample App | CustomCalendar

Please refer to the attached .oml file (Check the CSS rules defined in the Screen StyleSheet Section).

Note: I didn't cover the functional implementation, just the UI part.


Hope this helps you!


Kind regards,

Benjith Sam

MobileLabCustomCalendar.oml

2
0
on 13th Jan

Hi Benjith,

Thankyou for the sample file and the solution. Give me sometime to go through the file and see if it is working fine in my application and i will mark the question as solved :-).

Thanks

Siva Kumar

0
0
on 14th Jan
Benjith Sam
mvp_badge
MVP

Replying to siva kumar's comment on 14 Jan 2021 06:04:08

You're welcome, Siva.

No problem, take your time.. Glad to help you :)


Kind regards,

Benjith Sam

0
0
on 14th Jan

Hi Benjith, I tried the Flex field on the container and it worked :-) Thanks a lot for the idea But for some reason, i am not able to see the selection when i click on a container Do you know why is that?

I noticed that, when i run your sample app from the url you shared above, it is working fine. But when i import the oml file to studio and run that file, then the selection is not working. So there might be some difference between the oml file you shared and the sample app. 

0
0
on 15th Jan
Benjith Sam
mvp_badge
MVP

Hi Siva,

Sorry for the confusion here!

I have added an additional JS code in the screen OnReady handler flow, to achieve the cell selection highlight functionality. As I'm not completely aware of your use-case, I just excluded that implementation in the previously attached .oml file.

JavaScript Snippet

setTimeout(function() {
    var days = document.querySelectorAll('.day > div > div');

    days.forEach(function(dayCell) {
        dayCell.addEventListener('click', function() {
            dayCell.classList.contains('selectCell') ? dayCell.classList.remove("selectCell") : dayCell.classList.add("selectCell");
        });
    });
    
}, 1000);

Please refer to the attached .oml file.

Hope this helps you!


Kind regards,

Benjith Sam

MobileLabCustomCalendar.oml

0
0
on 16th Jan

Replying to Benjith Sam's comment on 16 Jan 2021 01:57:51

Hi Benjith,


I have two Usecases for this Flex field.

First One, I need show the bookings inside each date so that when a user clicks, a new page opens up and displays the bookings on that day.

Second one, I have used this Flex container to display the number of slots per day and can click multiple slots inorder to open that particular slot for receiving customer booking.

I dont have experience working with .js files, so could you let me know is it possible to set a variable a boolean value on selection of a container and if selected again, it turns off?

Really appreciate your help and this will be my last question :-)

0
0
on 16th Jan

Replying to siva kumar's comment on 16 Jan 2021 07:24:44

Hi Benjith,

I figuredout the solution to both my usecases. So i will make this as solved. Really appreciate your help here.

Thanks

Siva

0
0
on 16th Jan
Benjith Sam
mvp_badge
MVP

Replying to siva kumar's comment on 16 Jan 2021 12:30:24

Hi Siva,

I'm really sorry for the late response, couldn't able to respond you because of some urgent work. Glad that you got it solved :)

You're most welcome :)


Kind regards,

Benjith Sam

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