Is there a way to put the tabs of a spry tabbed panel in the center?
+------+------+
|Tab 1|Tab 2 |
+------+------+
+-----------------------+
| panel |
| |
+-----------------------+
At the moment they are on the left by default.
According to this example:
http://adobe.github.io/Spry/samples/tabbedpanels/tabbed_panel_sample.htm
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab TabbedPanelsTabSelected" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
Just work on css, adding these rules to center the tabs menu (i tried on the fly with firebug):
.TabbedPanelsTabGroup{
text-align: center;
}
.TabbedPanelsTab{
display: inline-block;
float: none;
}
Related
I am creating a side menu bar, and I want to highlight name of page user is currently active on. Something like this:
I have successfully managed to do that, but style I defined is taking effect on all the links throughout the website, which is causing a lot of problem.
If I apply <style scoped>, style is not taking effect anywhere. Not even on intended page.
My Component looks something like this..
Menubar.vue
<template>
<ul class="w-56 border bg-base-100 border-none">
<li class="my-4">
<nuxt-link active-class="current-dash-page" to="./general" class="nav-link p-3">General Information</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./announcements" class="p-3">Announcements</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./learners" class="p-3">Manage Learners</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./schedule" class="p-3">Schedule</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./danger" class="p-3">Danger Zone</nuxt-link>
</li>
</ul>
</template>
<style>
.nuxt-link-exact-active {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: hsla(var(--a) / var(--tw-bg-opacity));
color: white;
}
</style>
The problem might be with the values of your to="" arguments. They are relative to the current page, so if you navigate to, for example, "learners" then your url will end with .../learners/ then if you navigate to "danger" your url will change to .../learners/danger/ which will be missed by the exact-active class. Try giving absolute values to to="".
The css class you should be using is router-link-exact-active
I am using Emmet in WebStorm.
The output of this line:
ul#nav>li.item$*4>a{Item $}
Must be:
<ul id="nav">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
<li class="item4">Item 4</li>
</ul>
Instead, this is what I am getting:
<ul id="nav"></ul>
<!-- /#nav --><li class="item1"></li>
<!-- /.item1 --><a href="">Item 1</a><li class="item2"></li>
<!-- /.item2 --><a href="">Item 2</a><li class="item3"></li>
<!-- /.item3 --><a href="">Item 3</a><li class="item4"></li>
<!-- /.item4 --><a href="">Item 4</a>
It works fine in Sublime Text and Atom. Can anyone please help?
Update (added screenshots)
Make sure to uncheck Escape in Preferences | Editor | Emmet | HTML, Filters enabled by default
I want to add font awesome in nav-bar bootstrap but it showing this kind of problem
My problem is i want to user bigger icon size but it is not center aligning
I can solve it by giving absolute position to icon and extra left margin to text.
But is there any proper solution for this
Demo: http://www.bootply.com/MgKvoq91WI
Add vertical-align: middle; to icon class:
.fa-2x{
vertical-align: middle;
}
See updated DEMO
Just replace below line in your html
<li class="active"><i class="fa fa-plus"></i> <b>Create New</b></li>
fa fa-plus fa-* change in icon size, but in your case no need to use.
Use this
<li class="active"><i class="fa fa-plus"></i> <b>Create New</b></li>
You use class="fa fa-plus fa-2x" class that why this show bigger.
I have just implemented Flexslider2 Slider w/thumbnail controlNav Pattern. The problem is that I have 8 images that I want to scroll through. Right now, the thumbnails are displaying all 8 thumbnails below the main image. I would like to limit the max number of Thumbnails displaying to 4, and then scroll the thumbnails when it gets to images 5-8.
The maxItems: 4, does not seem to be working for me.
Here is my JS:
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
maxItems: 4,
});
});
</script>
Here is my HTML:
<div class="flexslider">
<ul class="slides">
<li data-thumb="/Images/Products/WoodenSign/PNG/1-AMORE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png">
<img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/1-BenchFullShot.png">
<img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/2-CabinRight.png">
<img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
</li>
<li data-thumb="/Images/Products/WoodenSign/PNG/3-LOVE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
</li>
</ul>
</div>
You have to define the Flexslider width in your css file let's say put it to width: 400px in the flexslider.css
.flexslider {
width: 400px;
}
and then in your jQuery initialization of the slider define the width of the single slide, like this:
$('.flexslider').flexslider({
itemWidth: 100
});
This is defining a width of 100px for every single slide. With this setup you should have 4 slides displayed.
I have a Kendo tabstrip and I'm trying to put two divs with the col-md-6 class side by side inside a tabstrip item. Instead of having 2 columns, they stack on top of each other. If I change any of them to col-md-5 or smaller, they work correctly. Has anyone had this problem and found the culprit?
This might be more of a 'hack' than a fix, but this is how we got around it
create a class, lets call it boxFix
.boxFix *,
.boxFix *::before,
.boxFix *::after {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
Then for the kendo tab strip
<div id="tabstrip">
<ul>
<li class="k-state-active">
tab 1
</li>
<li>
tab 2
</li>
<li>
tab 3
</li>
Sydney
</li>
</ul>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
Like I said this is probably more of a hack... but I hope it helps.
I was experiencing the same issue as OP; however, I am using the Telerik MVC wrappers which already place a k-content class on the tab contents div. Therefore, I implemented Josh's suggestion by reusing the Telerik / Bootstrap classes instead of creating a new class.
.k-content > .row > *,
.k-content > .row > *::before,
.k-content > .row > *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I had the same problem and solved it using http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout
Here is a working sample
http://dojo.telerik.com/#Xavier/iYAW/2