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
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 have a a section that needs to be full width. Ok, fluid-container. Now, within that, i need two colummns, -8 and -4, each with a different background colour. Ok, no problems.
Now the design calls for the content in these columns (.left and .right) to have copy as if it was in a .container
Here's my html snipper
<div class="container-fluid homeBannerCTAs">
<div class="row">
<div class="col-sm-12 col-md-8 left">
<div class="">
<h2>Left CTA</h2>
</div>
</div>
<div class="col-sm-12 col-md-4 right">
<div class="">
<h2>right CTA</h2>
</div>
</div>
</div>
</div>
and my sass snippet which is giving a height and setting the bg colours.
.homeBannerCTAs {
#include breakpoint(lg) {
height : 234px;
}
.left {
height : inherit;
background : #004557;
}
.right {
height : inherit;
background : #dfc986;
}
}
And the design portion.
Here's my full prototype
http://boilerplate.fls-interactive.com/kffTemplate.php
I don't have the mobile design yet (yeah, i know), but i'm assuming these will stack.
I'm kinda banging my head here on this.
Cheers.
Do you have to use Bootstrap, or could you use Flexbox here? Something like this could be pretty easily achieved with Flexbox. If you can use Flexbox, let me know and I'll post a Codepen.
OK, something like
.container {
display:flex;
}
.left-col {
flex: 2 0 auto;
padding:20px;
background:#CCC;
}
.right-col {
flex:1 1 auto;
padding:20px;
background:#999;
}
Here's a very basic CodePen:
http://codepen.io/toddsdarling/pen/akgqJy"
You can adjust the flex of each container to take up more or less room, and also set the height (and max-height as well).
I do this sometimes with columns that I don't want to shrink past a certain width. You can do something like "flex:0 400px", for example.
I am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life
I have made a sidenav and its collapse button is in the navbar using the materialize framework. The collapse-button starts disappering if the screen resolution is more than 993px. This is the code
<div class="nav-wrapper">
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
<img src="Logo.png" width="120">
<ul id="nav-mobile" class="right">
<li>
<img src="work/marker-5.png">Bangkok
</li>
</ul>
</div>
</nav>
My script is this
$(".button-collapse").sideNav({
menuWidth: 350,
closeOnClick: true
});
Is this due to any media query in the materialize framework?
If you remove the button-collapse class then the menu will remain visible on wider screens.
That it's because the materialize only use this button for phones and tablets. If you want to use it for large devise you need to add the following class to your menu item like they said in their documentation
Fullscreen HTML Structure
If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse
When you do it, the code will remain in this way.
<i class="mdi-navigation-menu show-on-large"></i>
also i actually change the class from "mdi-navigation-menu" to "material-icons" and use the menu icon. In this case the code is going to look like this:
<i class="material-icons show-on-large">menu</i>
This is the link of the Materialize Documentation
Hope this help you! :) In my personal opinion materializeCSS need more specific documentation for certain things.
In you materialize.css file , change the following code,
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: none;
}
}
To
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: block;
}
}
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.