Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC:

Align tab in tab navigator vertically on small screens 2 years 4 months ago #8191

  • Windesheim
  • Windesheim's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
I use the tab navigator quite regularly to segment information. However, when I visit the page on my mobile device (Android phone) the tab of the tab navigator don't align vertically, which I think makes more sense on small screens.

The attached screenshot shows how the tabs organise themselves on my mobile device. Is there a way to insert some code that makes these tabs align vertically? By which every pane takes up its own horizontal space?

Kind regards,
Arman
Attachments:

Please Log in or Create an account to join the conversation.

Align tab in tab navigator vertically on small screens 2 years 4 months ago #8192

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 850
  • Thank you received: 261
Hi
I'm guessing that you want both the tabs and their panes to just to appear vertically rather than just the tabs and I'm not sure there is an easy solution to that. However if your are mainly concerned about just the tabs appearing vertically and retaining the navigation then I think there are two option:
1. use the accordion instead
2. try the following:
in a styles optional property at LO level add the following:
/* Smartphones (portrait and landscape)
*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.nav-tabs > li {
clear: both;
}
}
This is in a media query so should only affect devices that match that query and should look like the attached screenshot.

HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
Attachments:
The following user(s) said Thank You: Windesheim

Please Log in or Create an account to join the conversation.

Align tab in tab navigator vertically on small screens 2 years 4 months ago #8193

  • Windesheim
  • Windesheim's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
Works perfectly :)

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: JohnSmith
Time to create page: 0.056 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search