i'm using bootstrap nav-tabs(vertical pills). i want to make this - when i click on tab, the content of THIS tab drop downing exactly under this tab(not somewhere else) like this
Then the Bootstrap feature what you are looking for is called Accordion or Collapse and not Nav-Tabs.
Here is the link where its available in the bootstrap documentation. You do not need any extra plugin except ofcourse jquery.min.js', bootstrap.js and bootstrap.css to make this work.
Important Note : jquery.min.js should be loaded before bootstrap.js.
http://getbootstrap.com/javascript/#collapse
Here is the basic Accordion example with the required libraries.
Hope it helped :-)
I have found solution. if someone also have this problem, just check bootstrap accordion
accordion
thats it!
From the Bootstrap docs:
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Using navs for tab panels requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
Make navs used as navigation accessible
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
Related
I'm writing JS plugin which will be placed in several different websites. Those websites are using different styling, some Bootstrap, some Bulma and some just custom styles.
My plugin is generating DOM elements like divs, inputs, selects. I want to style those elements on my own. How to make this plugin look the same in any website which it will be embed?
Maybe creating Shadow DOM elements would help. Then you will be able to add your custom DOM elements and they will not be affected by whatever is outside. See here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
I'm trying to do a sticky sidebar just like the one ng-bootstrap is using.
Currently, I am using Angular 7.0 and Bootstrap 4.x. I just want to do the sticky like sidebar like in the components page of AngularUI (see link above). However, I can't seem to find the feature in the list of components.
So far, I've inspected the page in the components section of ng-bootstrap demo page, it uses ngb-sidenav but I'm not sure though. Anyone knows where or what library should I use?
I've been trying to find a suitable library but most of them are either for AngularJS (1.x) or paid library.
>>> UPDATE <<<
I'm thinking of using position-sticky class and apply it to my vertical navs component. This might do the trick but I'm still gonna test this. I'm going to update this after I test it.
I've made it work. For those who are looking for the solution for having a sticky functionality, you may use bootstrap's sticky-top class. Just see its description
My fix is using bootstrap itself and not ng-bootstrap. Just sticky-top and a bunch of css styles to suite my needs.
Also, adjust accordingly to your needs.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
The website I am working on does not use the Bootstrap navbar for desktop version, utilising the responsive navbar (and hiding the custom navigation) on the mobile version. The navbar, without the actual links, is present even in the desktop version, displaying the branding and the search form.
However, the problem is that the website ends up with three navigation types:
1) The custom navigation unit, used on the desktop version.
2) The collapsed navbar with a toggle button
3) The default "navigation links in navbar" on most of the tablets. I want to get rid of this one: there are too many links (can not do much changes to the website structure) and it looks noisy.
Is it possible Bootstrap's navbar always collapsed?
This is not a direct answer to your question, but I think it might help you resolve your situation.
Consider using the Bootstrap Responsive Utility classes to hide certain navigation elements. For instance, maybe apply the hidden-desktop class to the menu items inside the navbar.
Scroll to the bottom of this page to see the classes:
http://twitter.github.io/bootstrap/scaffolding.html#responsive
Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.