1. Forums
  3. Support and Presales
  5. Developer Members Support
  7. Tab nesting feature

Tab nesting feature

5 years 3 months ago - 5 years 2 months ago #310256 by activha
[SOLVED] Tab nesting feature was created by activha
Hello

I would like to change the media width for tabs nesting feature in order to lower the width and better adapt to small screens when we only display icons for tab names.

However I could not locate the css media rule unless I'm tired.

Mind to give me a hint ?

Thanks
Jean

Please Log in to join the conversation.

5 years 3 months ago #310258 by activha
Replied by activha on topic Tab nesting feature
Oupss it's in bootstrap.min.css
Tired this evening, you can delete this post

Please Log in to join the conversation.

5 years 3 months ago - 3 years 2 months ago #310260 by krileon
Replied by krileon on topic Tab nesting feature
Don't change the media rule in Bootstrap it self. You will impact every grid usage in CB using it. Not sure I completely understand what you're wanting though. You don't want it to collapse into the hamburger menu for mobile views? The below CSS can do that.

With Scrolling:
@media (max-width: 575.98px) {
	.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
	.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle  {
		display: none;
	}

	.cb_template .cbMenuNavBar .collapse {
		display: block;
	}

	.cb_template .cbTabsMenu .collapse {
		display: flex;
	}

	.cb_template .cbMenuNavBar .cbMenuNav,
	.cb_template .cbTabsMenu .cbTabsNav {
		overflow: auto;
		-ms-flex-direction: row;
			flex-direction: row;
		-ms-flex-wrap: nowrap !important;
			flex-wrap: nowrap !important;
	}

	.cb_template .cbMenuNavBar .cbMenu,
	.cb_template .cbTabsMenu .cbTabNav {
		white-space: nowrap;
	}

	.cb_template .cbMenuNavBar .nav-link,
	.cb_template .cbTabsMenu .cbTabNavLink {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMore .cbTabNavMenuMoreBtn {
		display: block !important;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMenuNested {
		display: none !important;
	}
}

Without Scrolling (will wrap the tabs down)
@media (max-width: 575.98px) {
	.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
	.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle  {
		display: none;
	}

	.cb_template .cbMenuNavBar .collapse {
		display: block;
	}

	.cb_template .cbTabsMenu .collapse {
		display: flex;
	}

	.cb_template .cbMenuNavBar .cbMenuNav,
	.cb_template .cbTabsMenu .cbTabsNav {
		overflow: auto;
		-ms-flex-direction: row;
			flex-direction: row;
	}

	.cb_template .cbMenuNavBar .nav-link,
	.cb_template .cbTabsMenu .cbTabNavLink {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMore .cbTabNavMenuMoreBtn {
		display: block !important;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMenuNested {
		display: none !important;
	}
}

If you just want to add CSS that would take affect only when it becomes mobile view then use the below media usage.
@media (max-width: 575.98px) {
	// YOUR CSS HERE
}

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

5 years 3 months ago - 5 years 3 months ago #310264 by activha
Replied by activha on topic Tab nesting feature
Exactly what I wanted but I have a small problem with scrolling as we added tooltips for better understanding and scrolling does not work.

If you look at activ-ha.com/profil/demotest1 you may understand what is going wrong ?

I have also noted that using your tip code forces iPhone users to double touch to open the link or the tab.
Is this possible to change this behavior by a data command ?

Please Log in to join the conversation.

5 years 3 months ago #310272 by krileon
Replied by krileon on topic Tab nesting feature

Exactly what I wanted but I have a small problem with scrolling as we added tooltips for better understanding and scrolling does not work.

Scrolling seams to work perfectly fine in my tests. You don't have enough tabs for it to enable scrolling. Editing the DOM to duplicate a few shows it working fine.

I have also noted that using your tip code forces iPhone users to double touch to open the link or the tab.

Tip code? The code provided above? I can't possibly see why. It doesn't change the behavior of tabs beyond hiding the hamburger menu nesting and the tab links are just regular href usages.

Is this possible to change this behavior by a data command ?

Disable the nesting? No.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

5 years 3 months ago #310281 by activha
Replied by activha on topic Tab nesting feature

Scrolling seams to work perfectly fine in my tests. You don't have enough tabs for it to enable scrolling. Editing the DOM to duplicate a few shows it working fine.


We add to add a width to get it work properly
	.cb_template .cbTabsMenu .collapse {
		display: flex;
		width: 100%;
	}

Tip code? The code provided above? I can't possibly see why. It doesn't change the behavior of tabs beyond hiding the hamburger menu nesting and the tab links are just regular href usages.


No I mean we are using qtip code in translations override like :
'_UE_DETAILS' => '<i class="fal fa-inline fa-lg fa-fw fa-info mr-1 ml-2" data-cbtooltip-tooltip="Informations" data-cbtooltip-width="" data-hascbtooltip="true" data-cbtooltip-position-my="bottom center" data-cbtooltip-position-at="top center" data-cbtooltip-classes="qtip-simple" data-hasqtip="75"></i><span class="d-none d-xl-inline">Infos</span>',

and using this code makes that iOS users have to touch once to show the qtip and another time to activate the # link. Is it possible to change the behavior with your js in order to get one touch only ?
We were thinking of using standard bootstrap 4 qtip but it doesn't seem to work unless we activate the js in the CB page. So I guess you're using another library and would like how to produce a standard iOS behavior on our web app which uses CB pages.

Please Log in to join the conversation.

Moderators: beat, nant, krileon
  1. Forums
  3. Support and Presales
  5. Developer Members Support
  7. Tab nesting feature
Time to create page: 0.265 seconds

Facebook Twitter LinkedIn

    You are here:  
  1. Home
  2. Forums
  3. Support and Presales
  4. Developer Members Support
  5. Tab nesting feature

Search

Login / Logout

User Menu