Dear admin
How can I do this with Cwicly Toolkit (applies to Tab block, Menu Block, Accordion block…) on mobile devices?
Link video : Mobile Slider
Thank you !
Hello @NHViet,
Thanks for your message through our support system.
We’ll get something ready for you in the next little while, and share it here so if someone else wants/needs this type of tabbing system, it’s freely available.
Thanks for your patience.
Dear Admin
Blocks like Tab/accordion/Menu…Sliding on mobile devices greatly increase the user experience and make the mobile interface neat and professional.I hope the Cwicly team will help me solve this problem
Thank you !
Hi there,
Here is a quick try at this, so please excuse the design.
The tab list needs to have the tab contents id specified.
This is really focused on touch devices, as on desktop you would have to use shift + scroll (if you’re intending to hide the scrollbar).
You’ll notice the custom css:
.blockclass {
white-space:nowrap;
-webkit-overflow-scrolling:touch;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.blockclass::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.blockclass {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
The export: https://drive.google.com/file/d/1rbzXzNoC3e7OZ92B23-agV8yJWZZ7uqu/view?usp=sharing
As a side comment, you might notice discrepancies between frontend and backend when using blocks with text (width etc.).
This is mainly caused by the white-space: pre-wrap property added by Gutenberg, as stated in their code:
/**
* In HTML, leading and trailing spaces are not visible, and multiple spaces
* elsewhere are visually reduced to one space. This rule prevents spaces from
* collapsing so all space is visible in the editor and can be removed. It also
* prevents some browsers from inserting non-breaking spaces at the end of a
* line to prevent the space from visually disappearing. Sometimes these non
* breaking spaces can linger in the editor causing unwanted non breaking spaces
* in between words. If also prevent Firefox from inserting a trailing `br` node
* to visualise any trailing space, causing the element to be saved.
*
* > Authors are encouraged to set the 'white-space' property on editing hosts
* > and on markup that was originally created through these editing mechanisms
* > to the value 'pre-wrap'. Default HTML whitespace handling is not well
* > suited to WYSIWYG editing, and line wrapping will not work correctly in
* > some corner cases if 'white-space' is left at its default value.
*
* https://html.spec.whatwg.org/multipage/interaction.html#best-practices-for-in-page-editors
*
* @type {string}
*/
Dear admin
I have seen the file you sent and followed the same as the video. please let me ask 2 questions
1 - Is it possible to make Tab a stretch row?. Because that way it will look much better
2 - Is it possible to apply with Menu block?
Thank you!
You could remove the max-width and set the width to 100%.
Should be possible.
Don’t forget to copy and paste the custom CSS snippet to the menu block and apply the following rule to it:
Hope that helps and it’s fine hijacking here, since these instructions wouldn’t be possible over on FB, where you also asked.
Dear admin
Everything was working fine. Thank you so much !. I have a slightly more advanced question, can we add arrows in the menu/tab slide?.Please see the picture I sent to understand what I mean
Thank you !
This is possible, using the Slider block.
Desired arrow behaviour is also possible, enabling the default Slider navigation and tweak them with Relative Styling.
There is a CSS solution for your current setup, but this is advanced and kind of complex, and I wouldn’t recommend using it on a live site since it might cause browser compatibility issues.
So the only solution to achieve this out of the box, is using the Slider block.