Tab nesting feature

activha
OFFLINE
Posts: 2334
Thanks: 117
Karma: 13

5 years 9 months ago - 5 years 9 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

Last edit: 5 years 9 months ago by krileon. Reason: Added [SOLVED] tag to subject

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

activha
OFFLINE
Posts: 2334
Thanks: 117
Karma: 13

5 years 9 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 or Create an account to join the conversation.

krileon
ONLINE
Posts: 48541
Thanks: 8290
Karma: 1445

5 years 9 months ago - 3 years 9 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:

Code:

@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)

Code:

@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.

Code:

@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.

Last edit: 3 years 9 months ago by krileon.

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

activha
OFFLINE
Posts: 2334
Thanks: 117
Karma: 13

5 years 9 months ago - 5 years 9 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 ?

Last edit: 5 years 9 months ago by activha.

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

krileon
ONLINE
Posts: 48541
Thanks: 8290
Karma: 1445

5 years 9 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.

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

activha
OFFLINE
Posts: 2334
Thanks: 117
Karma: 13

5 years 9 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

Code:

	.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 :

Code:

'_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 or Create an account to join the conversation.

Moderators: beat, nant, krileon