By default, tabs are displayed on the left, but you want them to be displayed in the center.
I would like to do the following.
<div>
<tabset class="justify-content-center">
<tab heading="Basic title" id="tab1">Basic content</tab>
<tab heading="Basic Title 1">Basic content 1</tab>
<tab heading="Basic Title 2">Basic content 2</tab>
</tabset>
</div>
I looked at the tab page but it doesn't seem to support the center view, what should I do?
https://valor-software.com/ngx-bootstrap/#/tabs
I tried to do the following in styles.scss, but I got a build error.
tabset ul {
#extend .justify-content-center;
}
"ngx-bootstrap": "^5.2.0"
By setting css like this, we were able to achieve what we wanted to do.
scss
.tabset-justify-content-center {
.nav-tabs {
#extend .justify-content-center;
}
}
#import '../node_modules/bootstrap/scss/bootstrap';
html
<tabset class="tabset-justify-content-center">
Related
I am using Bootstrap-Vue's accordion component and I am struggling with trying to figure out how I can show the correct collapse state for the + and - icons on the right hand side of the accordion buttons.
Does anyone know how to start the icon in the + state and when the user clicks the accordion button and shows the content, I want the icon to be -.
I hope this makes sense. I have JSFiddle here: https://jsfiddle.net/26gvdxqo/
Adding this to the code will fix your issue:
...
<div class="when-open"> + </div>
<div class="when-closed"> - <div>
...
<style>
.collapsed > .when-open,
:not(.collapsed) > .when-closed {
display: none;
}
</style>
I've been using Docusaurus v2 with the default theme for my Python library website and love it! I'd like to change the position of the announcement bar, which is currently at the top of the page, as it isn't very visible. I think it would work better beneath the "hero". Is there any way to accomplish this without swizzling the Layout element? Thanks!
You can always create your own annoucement bar component and add it to your index.js file. This is what I did to create any additional bar under the hero.
CODE EXAMPLE:
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className='container'>
<h1 className='hero__title'>{siteConfig.title}</h1>
<p className='hero__subtitle'>{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className='button button--secondary button--lg'
to='/docs/intro'
>
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
{/* YOU CAN ADD YOUR ANNOUNCEMENT BAR HERE */}
<div>
<YourComponent />
</div>
</div>
</header>
);
}
Create and Add your Annoucement Bar Component
This is how I added it to my website under that homepage hero...
Example Home Page Annoucement Bar Docusaurus Website
I recently switched to Ionic 4 and I'm having some troubles with the SCSS.
I have a very basic home page :
<ion-content padding>
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.4"></ion-progress-bar>
</div>
</ion-content>
And I would like to set a custom background color for my progress bar without using primary colors set in variable.scss
I saw while running the app that this is the result HTML inside the ion-progress-bar
<div class="progress" style="transform: scaleX(0.4);"></div>
<div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
These elements are inside a shadow root, and I understood that using a simple background-color: red in my SCSS wouldn't work.
Here is what I did in my SCSS file :
.quizz-progress{
ion-progress-bar{
.progress{
--background-color: var(--ion-color-primary);
}
.progress-buffer-bar{
--background-color: var(--ion-color-light);
}
}
}
But this has no effect. How could I change the color of the progress bar without using the color attribute ? Thank you in advance for any help
try like this
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.5"></ion-progress-bar>
</div>
.quizz-progress {
ion-progress-bar {
--background: green;
--buffer-background: red;
--progress-background: black;
}
}
here CSS Custom Properties
I have the following structure of the Worklight application page:
<body>
<div with heading/>
<div with view/>
<div with Tab bar/>
<div with simple dialog/>
</body>
When I build the app for iPad and test it on it i have the following problem.
Dialog window puts gray unclickable layer on everything except the tab bar.
Why the tab bar stays available?
Is it a bug or I'm doing wrong?
Have you tried to put the heading, tab bar and dialog in the view?
Who invoke simpleDialog? try this
<body>
<div id="home" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<div with heading/>
<div with simple dialog
<button data-dojo-type='dojox.mobile.Button' onClick="openDialog()">
/>
<div with Tab bar/>
</div>
</body>
for invoke simple dialog, write
function openDialog(){
WL.SimpleDialog.show("text ", "text",[{text: "buttonName", handler: function() {WL.Logger.debug("dfsdfd"); }
}]
}
);
I tried put in views in a different variations, but it still didn't work.
Than while debugging I found out that the grey cover, which should cover everything in background has a
postion: absolute;
than I override this css class with
position: fixed;
and everything became great:)
i want to disable single tab in tabcontainer of dojo .
Here's my workaround for this problem:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"none"});
and:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"inline-block"});
For some reason, altering the disabled property, or calling setDisabled does nothing for me.
You can't do it directly since this is not a feature of the DOJO tab container. There has been a bug against DOJO, open for about 3 years, to add the feature: http://bugs.dojotoolkit.org/ticket/5601
That defect also has a potential workaround in it.
dijit.byId('tab').controlButton.domNode.disabled = true
I answered this question in another thread. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:
How do I dynamically show and hide an entire TabContainer using DOJO?
You can override its default css to make the tabbar invisible.
dojo.attr(dijit.byId('tab'), "disabled", true);
dijit.byId('tab').onClick = function () { };
You can disable tabs by setting the disabled property of the pane:
Source: https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html
pane.set("disabled", true);
Example:
<div data-dojo-type="dijit/layout/TabContainer" style="width: width: 350px; height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data- dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="second" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data- dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
<script type="dojo/require">
registry: "dijit/registry"
</script>
<button type=button onclick="registry.byId('second').set('disabled', !registry.byId('second').get('disabled'));">
toggle tab #2 disabled
</button>
Only problem here is that it's not visible to the user they can't click on it.
You can these additional CSS selectors:
.dijitTab.dijitDisabled {
cursor: not-allowed !important;
}
.dijitTab.dijitDisabled > .tabLabel{
cursor: not-allowed !important;
}