I'm trying to create a topbar using twitter bootstrap, but the black bar won't render. I've got a simple rails app with haml-rails and less-rails-bootstrap.
I tried the following haml:
!!! 5
%html
= render 'layouts/header'
%body
.topbar-wrapper
.topbar
.topbar-inner
.container
%a{:href => "brand", :href=>"#"} Name
.container
= yield
I had a look on SO and found the following post: Twitter Bootstrap css topbar html/css I tried translating that HTML into haml, but this doesn't work either:
!!! 5
%html
%body
.topbar
.topbar-inner
.container
%a{:class => "brand", :href =>"#"} Name
I can see the bootstrap styling, so I have included bootstrap and it is being rendered along with the page. I must be making some mistake in my haml.
The HTML scaffold in Bootstrap 2.0 is different from the one proposed in 1.4:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
In HAML this would be something like:
.navbar
.navbar-inner
.container
...
You can find more details at: http://twitter.github.com/bootstrap/components.html#navbar
Related
I want to add a class only on mobile. I have done this before using vuetify however it seems more difficult with vue:
code:
<div class="{'mobileSnackBar': breakpoint.xs}">
<p> This is my snackbar </p>
</div>
in vuetify you have the $vuetify.breakpoint.xs however how would i get a similar effect with bootstrap? Or please recommend an alternative.
With vuetify you can do:
computed: {
is_screen_small() {
return this.$vuetify.breakpoint.smOnly
},
}
And combine it like this:
<div class="{'mobileSnackBar': is_screen_small}">
<p> This is my snackbar </p>
</div>
Please make sure you read vuetify docs for breakpoints to know more.
However as I know with bootstrap the only way is to use media queries:
// Small devices
#media (max-width: 760px) {
//Add your style here
}
Though, there is a solution which is not related to bootstrap:
computed: {
is_mobile() {
const isMobile = window.matchMedia("only screen and (max-width: 760px)")
return isMobile.matches ? true : false
}
}
And combine it like :
<div class="{'mobileSnackBar': is_mobile}">
<p> This is my snackbar </p>
</div>
Another way with bootstrap is to use the breakpoint classes to show/hide elements, something like this:
<div class="mobileSnackBar d-sm-none">
<p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
<p> This is my snackbar </p>
</div>
Makes more sense with components rather than html, and maybe even then not the cleanest solution, but it does work.
I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.
I made a website with a Bootstrap navbar, but on mobiles, I want to show my Snap.js shelf instead. How do I do that?
What you are looking for is the .hidden-xx class.
You can do the following to hide the Bootstrap navbar on a phone and show the Snap.js shelf instead:
// Snap.js
// Visible only on xs screen sizes
<div class="snap-drawers hidden-lg hidden-md hidden-sm">
...
</div>
// Bootstrap
// Hidden on xs screen sizes
<nav class="navbar hidden-xs">
...
</nav>
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;
}
}
I am migrating some of dojo 1.6 code to dojo 1.8 and I could not get the layout to behave the same. So I stripped the code to bare minimum hoping to nail down the problem and ended up with 2 identical jsfiddles. I copied the code from one into another one... and yet one of them results in splitted dojo ContentPanes where the other one does not.
Example #1 (layout works): http://jsfiddle.net/mmlitvin/3onan361/17/
Example #2 (layout does not work): http://jsfiddle.net/mmlitvin/Lt0a2fhd/
HTML
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" id="mainBC">
<div data-dojo-type="dijit.layout.BorderContainer" id="splitBC" data-dojo-props="region:'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="topPane" data-dojo-props="region:'top'">SQL Statement and details</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'center'">Left Pane</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right',splitter:'true',minSize:1" style="width:50%;">Right Pane</div>
</div>
</div>
Javascript
debugger;
dojo.require('dojo.parser');
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");
CSS
#mainBC {
height:600px;
}
#topPane {
height: 15px;
border:none;
padding:0px;
}
They are not identical. If you click on Fiddle Options in the left menu, you'll notice that the working JSFiddle contains djConfig="parseOnLoad:true" in the Framework <script> attribute while the other one does not.
JSFiddle documentation states the following about this attribute:
Framework <script> attribute:
An ability to add special attributes to the script tag loading the framework.
That would result with <script type="text/javascript" src="/js/lib/someframework.js" {attributes}></script>
This means that dojo/parser is not running when the page loads in your second JSFiddle. In your actual code, simply add the djConfig="parseOnLoad:true to your <script> tag.