Basically what the title says. Is it possible to have off-canvas that's positioned top on small/medium, but then positioned left on Large?
I would have thought this would have done the trick:
HTML
<div class="off-canvas-custom reveal-for-large" id="offCanvas" data-off-canvas>
<ul class="vertical menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<button class="menu-icon" type="button" data-toggle="offCanvas"></button>
</div>
</div>
</div>
</div>
SCSS
.off-canvas-custom {
#include off-canvas-base;
#include breakpoint(medium down) {
#include off-canvas-position ($position: top);
}
#include breakpoint(large) {
#include off-canvas-position ($position: left);
}
}
But then the off-canvas disappears on large. Thanks for any insight you can offer.
Related
I'm new with django-cms and i want to add menu like image i post.
I have read the doc but i don't know how to create my custom menu.
I want to get something like this html code (Please add me explain):
some place in code i have .col-4, and another place i have .col-3 look image and code for more comprehension.
<ul class="menu">
<li class="toggle-menu">
<i class="fa icon_menu"></i>
</li>
<li class="first">
Accueil
</li>
<li>
Photographie
<div class="megamenu full">
<div class="row">
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Evènements</li>
<li>Mariage</li>
<li>Portrait</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Entreprise et institutions</li>
<li>Portraits Corporate</li>
<li>Reportage entreprise</li>
</ul>
</div>
</div>
</div>
</li>
<li>
Production media
<div class="megamenu full">
<div class="row">
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
<li>Nos offres</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Services</li>
<li>Montage</li>
<li>Drones</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Vos évènements</li>
<li>Mariages</li>
<li>Reportage coorporate</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Location</li>
<li>Cameras</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
but i dont know how, please help
To specify my question in detail, I have 2 divs. One of them is the main navigation and below my navigation I have a carousel (bootstrap). I want the carousel to fit perfectly to the bottom of the page when the user visits the page. Just for the aesthetics sake. I know I can set the height of the carousel to be e.g. 400px but each device's screen is different and I think it will look more professional and polished if the carousel's bottom will fit to the bottom of the screen regardless of the size of the window.
You could consider taking advantage of CSS's viewport-based units like vh and vw, which use a percentage of the available viewport width and height respectively :
.your-carousel {
/* This will occupy 100% of the available viewport */
height: 100vh;
}
This is supported in most modern browsers, so if you are already using Bootstrap, you should be fine.
This is my html by the way:
<body>
<!-- nav -->
<div class="container">
<a id="logo" class="font-raleway text-center" href="#">Denley</a>
<br>
<nav class="navbar navbar-default bold">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WOMEN</li>
<li>MEN</li>
<li>SHOES</li>
<li>ACCESSORIES</li>
<li>SALE OFF</li>
<li>COLLECTIONS</li>
<li>CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container -->
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-5">
<div class="col-xs-3 icons"><img src="images/icons/account.png"></div>
<div class="col-xs-3 icons"><img src="images/icons/wish_list.png"></div>
<div class="col-xs-3 icons"><img id="cart-icon" src="images/icons/cart.png"></div>
<div class="col-xs-3 icons"><img src="images/icons/search.png"></div>
</div>
</div><!-- /col-xs-12 -->
</div><!-- /row -->
<div class="row">
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/test.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Here is the template in question:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
My Company
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
{{#each page in pages}}
<li {{bind-attr class="page.isActive:active"}}><a href="javascript:undefined" {{action 'navigate' page}}>{{page.name}}</a></li>
{{/each}}
</ul>
<form class="navbar-form navbar-left hidden-sm" role="search">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button {{action "search"}} class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>{{#link-to 'cart' class="glyphicon glyphicon-shopping-cart"}}{{/link-to}}</li>
{{#if user}}
<li>{{user}}</li>
{{else}}
<li>{{#link-to 'login'}}Sign In{{/link-to}}</li>
<li>{{#link-to 'register'}}Register{{/link-to}}</li>
{{/if}}
</ul>
</div>
</div>
</nav>
{{outlet}}
<div class="container">
<hr />
<footer class="footer">
© My Company
</footer>
</div>
I compiled them using the ember-template-compiler.js file that came with my version of Ember (1.9.1)
For some reason, these quotes are being added around the nav in the markup and it's messing up the layout of my page.
I thought it might be related to a whitespace issue with ember 1.9, but I tried saving the files with Unix style endings and it didn't help.
Does anyone have any clue what might be causing this issue?
Turns out it was because Visual Studio would save my .hbs files in UTF8 with BOM (with signature) which adds a bunch of hidden characters to the beginning of the file.
I saved them without signature and it works perfectly now. No more empty strings, and my layout is how I expect it to be.
I want to get rid of the gap at the left of my green button on this screenshot. I can't seem to find any way to remove it.
Markup:
<div class="row">
<div class="small-4 medium-5 large-4 columns">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
aa
By default, Foundation applies a right and left padding to columns. I've created a snippet with a couple of options. You can target the column; or simply create a class and add a rule for left-padding.
/* -- target the first-child column -- */
.row .columns:first-child {
padding-left: 0;
}
/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
padding-left: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-4 medium-5 large-4 columns button-enroll">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
I'm working on a form using the Ember-Data Fixture adapter. My save method is in the edit route as follows:
actions: {
save: function () {
var visit = this.get('currentModel'),
self = this,
store = this.store;
visit.setProperties({
'notes': $('#notes textarea').val()
});
console.log('Visit Changes: ' + visit.changedAttributes());
visit.save();
console.log('Visit saved!');
self.transitionTo('planning.visits.visit', visit);
}
The notes field is referenced in the template simply as {{notes}} and is in the model as a DS.attr('string')
visit.changedAttributes() shows that the notes value changed and if I throw a breakpoint on the afterModel hook in the planning.visits.visit route I can get the object and see that the field was updated but the template itself never updates to reflect the change.
What am I missing?
*** EDIT ***
The view template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
Options
<i class="fa fa-caret-down fa-lg"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>{{#link-to 'planning.visits.edit' this}}<i class="fa fa-pencil-square-o"></i><span style="padding-left: 10px;">Edit Visit</span>{{/link-to}}</li>
<li><i class="fa fa-plus"></i><span style="padding-left: 10px;">Add Tasks</span></li>
<li class="divider"></li>
<li><a {{action 'delete'}}><i class="fa fa-trash-o"></i><span style="padding-left: 10px;">Delete Visit</span></a></li>
</ul>
</div>
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<p>
<label>Date:</label><br />
<strong class="value">{{startDate}}</strong> to <strong class="value">{{endDate}}</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label><br />
<strong class="value">{{notes}}</strong>
</p>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-lg-12">
<ul id="detail-tabs" class="nav nav-tabs">
{{#link-to 'planning.visits.visit.tasks' this tagName="li"}}{{#link-to 'planning.visits.visit.tasks' this}}Tasks{{/link-to}}{{/link-to}}
{{#link-to 'planning.visits.visit.requirements' this tagName="li"}}{{#link-to 'planning.visits.visit.requirements' this}}Requirements{{/link-to}}{{/link-to}}
{{#if hasIssue}}
{{#link-to 'planning.visits.visit.issues' this tagName="li"}}{{#link-to 'planning.visits.visit.issues' this}}Problems<span style="margin-left: 10px;>" class="badge pull-right alert-danger">1</span{{/ link-to}}{{/link-to}}
{{/if}}
</ul>
</div>
</div>
<div class="row">
<div id="tab-content" class="col-lg-12">
{{outlet tabs}}
</div>
</div>
</div>
</div>
And the edit template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Edit Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<button class="btn btn-default" {{action 'save'}}>
<i class="fa fa-check green" style="margin-right: 5px;"></i>Save Changes
</button>
{{#link-to 'planning.visits.visit' this tagName="button" classNames="btn btn-default"}}
<i class="fa fa-ban red" style="margin-right: 5px;"></i>Discard Changes
{{/link-to}}
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<p>
{{date-picker-with-label label="Start Date" value=startDate id="startDate"}}
</p>
</div>
<div class="col-lg-4">
<p>
{{date-picker-with-label label="End Date" value=endDate id="endDate"}}
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label>
{{textarea property=notes rows=3 id="notes"}}
</p>
</div>
</div>
</div>
</div>
Problem solved. PEBKAC error on my end. Helps if both the template field and the field you are updating are the same.