Set suzy gutters for a certain file / grouped set of classes? - susy

I know that you can set gutters for a suzy grid globally:
$susy: (
columns: 12,
gutters: 0.32,
}
And you can also override this for a particular class:
.something {
#include span(1 of 3);
#include gutters(1em);
}
But can you override gutters for certain file?
If the code below was a simplified version of my code what would be the shortest way of making row1s have a different gutter to row2s?
<div class="container1">
<div class="row1">
// Something
</div>
<div class="row1">
// Something
</div>
<div class="row1">
<div class="container1">
<div class="row1">
// Something
</div>
<div class="row1">
// Something
</div>
<div class="row1">
// Something
</div>
</div>
</div>
</div>
<div class="container2">
<div class="row2">
// Something
</div>
<div class="row2">
// Something
</div>
<div class="row2">
<div class="container2">
<div class="row2">
// Something
</div>
<div class="row2">
// Something
</div>
<div class="row2">
// Something
</div>
</div>
</div>
</div>

You can use the with-layout function to set up a special grid for any group of content:
$susy: (gutters: 0.3);
// everything out here will use 0.3 gutters...
#include with-layout((gutters: 0.5)) {
// everything in here will use 0.5 gutters...
.row2 {
#include span(3);
}
}
// everything out here will use 0.3 gutters again...
The mixin accepts any standard Susy grid map (used above) or grid shorthand as an argument. You can get more detail from the docs.

Related

Bootstrap Datepicker goes bottom

I am not an expert in Bootstrap 3. It was my first time to use the widget "datepicker". I have two date pickers that need to be displayed inline to each other. When I try a normal input it works but if it is a date picker it goes a little far at the bottom. I tried the position relative however it did not resolve the issue. See screen shot attached.Date picker goes at the bottom
Hope some one can give me some light. Below is my code.`
<div class="horiz-search-bar-wrapper">
<form class="form-inline">
<div class="form-group">
<label><strong>Search</strong></label>
</div>
<div class="input-daterange">
<div class="form-group rel-position-date">
<label>Check-In:</label>
<div class="input-group input-append date" id="from">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="form-group rel-position-date">
<label>Check-Out</label>
<div class="input-group input-append date" id="to">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group mar-left">
<button type="button" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
`
Just an update to this, we were able to fixed the issue by replacing the <label></label> tag to <span></span>. The bootstrap datepicker adds top pixels when it sees more than 1 label.
Hope this could help the others.
I was also seeing issues with the Datepicker appearing too low. Whether the targeted element was toward the top or bottom of the viewport and the Datepicker was respectively orienting itself above or below the element, I was seeing a Datepicker appear "too-low."
Stumbled on to a fix with some JavaScript hackery bound to the DP's "show" event/hook.
Note the use of the native Boostrap CSS utility classes datepicker-orient-top and datepicker-orient-bottom.
$('#DateOfBirthForEditing').datepicker().on("show", function (e) {
var refDatePicker = $('div.datepicker.datepicker-dropdown');
var refDatePickerField = $('#DateOfBirthForEditing');
var fieldPositionTop = refDatePickerField.offset().top;
var dpModalTopOffset = 0;
if (refDatePicker.hasClass('datepicker-orient-top')) {
dpModalTopOffset = fieldPositionTop - 255;
} else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
dpModalTopOffset = fieldPositionTop + 30;
}
refDatePicker.css({ "top": dpModalTopOffset });
});

Getting `this` to work in link-to helper of component

I have a component defined like so:
<div class="col-sm-4 col-md-2">
<div class="thumbnail">
<img src="assets/images/{{image}}">
<div class="caption">
<h5>{{#link-to 'games.game' this}}{{title}}{{/link-to}}</h5>
</div>
</div>
</div>
And I am using it like so:
{{#each model as |game|}}
{{game-details-small title=game.title image=game.image id=game.id}}
{{/each}}
I kind of accidentally got the link-to helper to work by passing in id=game.id as a property. However, if I remove that the link loses the reference to the id. I'm trying to find documentation on how passing in the id makes this reference the id correctly, but I can't find it. Any suggestions, links, or explanation would be helpful.
There is no this inside components, you have to pass the context, in your case you would pass the game:
{{#each model as |game|}}
{{game-details-small model=game}}
{{/each}}
And the template becomes:
<div class="col-sm-4 col-md-2">
<div class="thumbnail">
<img src="assets/images/{{model.image}}">
<div class="caption">
<h5>{{link-to model.title 'games.game' model.id}}</h5>
</div>
</div>
</div>

Zurb Foundation Margin between Columns

I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);

How to add tooltip on input field by using zurb foundation

I want to add a tooltip at bottom of input area.
So I wrote like this.
<div class="row collapse">
<div class="small-9 columns">
<span data-tooltip class="has-tip" title="Tooltip">
<input type="text" placeholder="name">
</span>
</div>
<div class="small-3 columns">
Action
</div>
</div>
But tooltip is appeared not at bottom of input field, but over the field.
How can I show tooltip bottom of input area correctly?
Try
<div class="row collapse">
<div class="small-9 columns">
<input type="text" placeholder="name" data-tooltip class="has-tip" title="Tooltip">
</div>
<div class="small-3 columns">
Action
</div>
</div>
Or you could place the tip in the <div class="small-9 columns">
This java-script gives the same effect as foundation5 tooltip, but for form elments without using the tooltip plugin.
HTML Code:
<input type="text" placeholder="name" data-tooltip title="This is the tip" />
Javascript:
inputToolTip: function() {
var _fadeSpeed = 400;
$("input[data-tooltip],textarea[data-tooltip]").each(function(k, input) {
var $input = $(input);
var _tiptext = $input.attr('title');
console.log($input);
var $tip = $('<div class="tip-place"><span class="tooltip tip-bottom tip-me">' +
_tiptext + '<span class="nub"></span></span></div>').hide();
$input.after($tip);
$input.focus(function() {
$tip.fadeIn(_fadeSpeed);
$input.attr('title','');
}).blur(function() {
$input.attr('title',_tiptext);
$tip.fadeOut(_fadeSpeed);
});
$input.removeAttr('data-tooltip');
})
};
inputToolTip(); // You will need to call this again, after adding a form via ajax, etc.
And finally some CSS Code
.tooltip.tip-me {
left: 1em
display: block
top: -1em
position: relative
}
.tip-place {
height: 0
}

Angular: Building a directive and remove attribute from root element

Is it possible to do something like this:
<field:text id="foo" label="Foo Label" model="model.foo" placeholder="foo" />
which would be compiled to:
<div class="control-group">
<label class="control-label" for="foo">Foo Label</label>
<div class="controls">
<input type="text" id="foo" placeholder="foo" ng-model="model.foo">
</div>
</div>
I tried to make a example, but Plunker wouldn't let me save my example... uploaded it to dropbox: https://dl.dropbox.com/u/2862814/plunk.zip
The example breaks with stuff like ng-change. This is due the compilation of the ng-change directive. I tried it with a high priority to the fieldText directive, but doesn't fix it.
You were pretty close with in your example, but you have to put ng-change on the input-field in the template. Your old code:
<field:text ng-change="updateHidden()" ...
Change this to
<field:text change="updateHidden()" ...
and in the directive (see http://docs.angularjs.org/guide/directive - & or &attr - provides a way to execute an expression in the context of the parent scope.)
{scope:{change:'&' ...
and finally the directive template
<input ng-change="change()" ...
Here is a modiefied and working plunkr: http://plnkr.co/edit/QmQjGQQBRtDmkCka0dul?p=preview
<field:text id="too" label="Too" model="model.too" placeholder="too" change="updateHidden()"></field:text>
<script type="text/ng-template" id="/tpl.html">
<div class="control-group">
<label class="control-label" for="{{id}}">{{label}}</label>
<div class="controls">
<input ng-change="change()" type="text" id="{{id}}" placeholder="{{placeholder}}"
ng-model="model">
</div>
</div>
</script>
directive('fieldText',function(){
return {
restrict:'E',
templateUrl:'/tpl.html',
scope:{change:'&',id:'#',model:'=',placeholder:'#',label:'#'}
}
})