Responsive
-
How to make main calendar non-responsive? I need it to be, and stay, the same no matter what its viewed on.
Tnx.
The page I need help with: [log in to see the link]
-
At some point when page is narrow, the layout changes to a list view, making the whole calendar one long list for the month. The idea is for the layout to never change. When the page is narrowed the whole calendar can be resized, but layout needs to be constant, regardless of screen size.
Well, the mini calendar view doesn’t switch to a list view, so you could just use that view, instead. It only has dates in each cell, however.
Otherwise, what you’d need to do is override all the CSS that triggers the responsive view; you can find that CSS in
/my-calendar/css/reset.cssstarting on line 1514.For the next release, there will be an easier way; I’m adding a shortcode attribute that can be used to add a custom class, and if you use the class ‘disable-responsive’, that will disable the responsive behaviors.
I can’t say that I think it’s a good idea; the full table will be very hard to use on a mobile device, but you can certainly do it.
Thank you.
Liked “but you can certainly do it.” but no, I dont understand enough about css to make that happen.
The file I have does not have that line with that code. There is a section called “/* Base responsive styles. Migrated to main plugin 12/10/2023 */” Thats the only use of the word “responsive” in the entire file. Is there a code that can be copied and pasted into it that will stop the responsiveness? If so, what and where?
For the next release, there will be an easier way; I’m adding a shortcode attribute that can be used to add a custom class, and if you use the class ‘disable-responsive’, that will disable the responsive behaviors.
How about a Simple checkbox? Check for responsive, uncheck for not. For us non-programmers who would like to use My Calendar too. The full table on mobile device is much easier for our particular set of disabilities (peripheral neuropathy – with shakes, among other manifestations) than having the layout ever change.
I’m mostly curious how the table is usable on mobile without being responsive; I can appreciate that the layout could be easier, but how do you actually read it? On a mobile device, the cells are so narrow that they become fairly unreadable, in my experience.
I’m reluctant to just add more check boxes to the settings; they’re already pretty overwhelming to most users. But I’ll give it some thought – I’m currently in the late stages of preparing the next major release.
The responsive layout is the one that’s difficult, to impossible, to work with on a small device. The change in layout itself causes issues. In this particular instance the event items turn to dots with no identifiers. These dots are way smaller than the event panes. I have large fingers and peripheral neuropathy. (A condition very prevalent among seniors. that has many causes, and can also be “idiopathic”.)
On the desktop response to a change in window size, all items are in one long column with its text squished up to where it cant be read. Responsive in this case means usability range decreases greatly to becoming unusable.
At least having a Choice between responsive and non responsive would alleviate some issues, but just responsive all the time itself, causes problems. Accessible? Being able to freely toggle between one or the other as wanted and/or needed would be a big improvement in accessibility.
I have to disagree on which is easier to “most” users. Check boxes/pull-downs, etc, are much easier than code. Its code that is overwhelming to non-programmers trying to use the calendar. I have been in cross platform technical support (Mac and PC, plus networking and hardware) for large and small companies, supporting literally thousands of users since the 80s and can say from experience that Most users prefer not to see code.
Thats why the suggestion and lobby for a Lite version.
C’mon. You can do it.
The responsive layout is the one that’s difficult, to impossible, to work with on a small device. The change in layout itself causes issues. In this particular instance the event items turn to dots with no identifiers.
So, that is actually an option: My Calendar > Settings > Display > Grid Options > Mobile View: “Switch to mini calendar”. You’ll probably want to turn that off, and set it to “no change”.
No change is still the responsive mode; it’s the one you see when you change the width of the desktop viewport, but it at least reduces the number of options you’re dealing with.
The “squished up” effect is coming from your custom CSS; and I apologize for that, I should have anticipated that problem.
Instead of
.mc-main .wed { width: 10%; }, etc., you need all those styles wrapped in a viewport declaration:@media screen and ( width >= 720px ) {
.wed { width: 10%; }
etc.
}All of the cell widths need to be constrained so they only apply when the viewport is wider the 720px, because that’s where the responsive is triggered.
I do want to be clear: I’m not opposed to a “lite” version, but it would be hundreds of hours of work to implement, and I have to be realistic.
Thank you. Gotta try that.
Good that you’re not opposed to a Lite version. Please keep that in the back of your head, tho.
Just wanted to let you know how difficult My Calendar is for non-programmers. It’s clear that its too complex for the general public. My site is locked into it right now from being designed around it from neolithic times. Rebuilding is hundreds of hours here too.
The site itself is not a non-profit, it just doesn’t make any money.
These questions apply to the Main Calendar view on page http://bowlingquest.com/?page_id=55550.
Viewport works fine on small devices and is being used on this page.
On the other end of the scale, on a desktop computer, with the same page, whenever the screen is narrowed, there is a point that it changes layout to having all events in one column by date – with one event per row. A typical month today with the normal 7 columns per week (one column for each cay), becomes one column wide and over a hundred rows deep. As the number of events per month increases (There are lots of repeating events.), the column depth will increase drastically, as will the difficulty of use.
Tried many viewport settings but none affect the desktop version. Seems to only work for small device.
How is the calendar set for desktop computer to where a decrease in screen width does not cause this, or any other, layout change – AND does not affect the already working small device settings?
Thank you.
I’m mostly curious how the table is usable on mobile without being responsive
The user can stretch, slide, magnify. Its not unresponsive, it just doesn’t change layout. Try it.
The view point is what makes the mobile layout usable on the main page of the site.. The fact that its NOT RESPONSIVE, does NOT change if the page size is changed, makes it usable. This is the mini calendar.
The calendar used on the site main page – landing page – is not the same as the one on the Main Calendar page. The Main Calendar also requires that absolutely NO layout changes are made when its page size is changed. In this instance responsiveness makes the Main Calendar unusable when the page is sized down to where the layout changes. On a desktop there are two stages of this, culminating in the single column, which is totally useless.
Responsiveness is NOT a universally desirable attribute. In this case it renders the Main Calendar page difficult, to unusable, when the page is sized down to some certain size. Please take a look. Can YOU use this calendar at all, once the page is narrowed to where it changes the layout to one column? This is why the layout needs to be unaffected by page size. The change needs only to be the addition of scroll bars to enable navigation across and down in any window size.
“I’m mostly curious how the table is usable on mobile without being responsive; I can appreciate that the layout could be easier, but how do you actually read it? On a mobile device, the cells are so narrow that they become fairly unreadable, in my experience.”
Go to bowlingquest.com and check it out. The”table” is totally usable as needed on both mobile and desktop. I have experienced zero problems with it since applying viewpoint. The mini calendar is used here.
The issue is with the main calendar on page http://bowlingquest.com/?page_id=55550. The Main Calendar is totally unusable on a mobile device and only marginally usable on a desktop due to the changes in layout when the screen is narrowed!
In addition there needs to be more ability to easily add or delete elements and change the positions and sizes of any and/or, all, elements in the cells of the main calendar, without complicated, cryptic, css.
In the version released today, you can add the class ‘disable-responsive’ to your shortcode, e.g.
[my_calendar class="disable-responsive"]and that will disable the responsive behaviors.Oh, yes. That’s the ticket. And you made it easy to do.
Now works fine on both mobile and desktop.
Thank you.
The topic ‘Responsive’ is closed to new replies.
