javascript,html,css,angularjs,materialize
Be careful mixing frameworks, it can and probably will have unexpected effects. As for showing and hiding elements, Here is a simple example of how to hide, show or toggle any element. (demo) HTML <a href="javascript:void()" data-show="hidden">Show</a> <a href="javascript:void()" data-hide="hidden">Hide</a> <a href="javascript:void()" data-toggle="hidden">Toggle</a> <div id="hidden"><!-- This can be any type...
So, the problem is, according to the documentation options should be an array. So if you do like this: Materialize.scrollFire([{ selector:".whoosh", offset: 10, callback: "alert('fired')"}]); It should work fine (notice the brackets [...]). In other words: var options = [{ selector:".whoosh", offset: 10, callback: "alert('fired')"}]; Materialize.scrollFire(options); ...
javascript,html,mongodb,meteor,materialize
You can use the triple mustache to ensure content is put in 'as is', only <script> code will be ignored. <p class="flow-text"> {{{questionText}}} </p> ...
css,material-design,materialize,materializecss
It seems that red and green works fine. <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css" rel="stylesheet" /> <button class="btn waves-effect waves-light red" type="submit" name="action">Submit <i class="mdi-content-send right"></i> </button> <button class="btn waves-effect waves-light green" type="submit" name="action">Submit <i class="mdi-content-send right"></i> </button> ...
javascript,jquery,css,materialize
$('element').mouseover(function () { var classList = $(this).attr('class').split(' '); classList.forEach(function (clss) { if (clss.indexOf('darken') > -1) { var color = clss.split('-')[0]; var desiredNumber = clss.split('-')[1] + 1; $(this).removeClass(clss).addClass(color + '-' + desiredNumber); } else if (clss.indexOf('lighten') > -1) { var color = clss.split('-')[0]; var desiredNumber = clss.split('-')[1] - 1; $(this).removeClass(clss).addClass(color +...
Just override the min-width attribute. But I would create a custom class and then override it. Below is an example for your current code. @media only screen and (min-width: 320px) { .row .col.m4 { width: 33.33333%; margin-left: 0; } } JSfiddle...
html,css,alignment,materialize
Try to use: .alternate-option { margin-left: 20px; vertical-align: baseline; position: relative; top:-5px; } Also look at: http://www.w3schools.com/cssref/pr_class_position.asp...
Most likely this is caused by a javascript error in your code. Typically in development mode your files aren't concatenated so if you have an error it won't stop any of the rest of your app from working. This is different in production mode. If you have a single js...
css,asp.net-mvc,razor,materialize
You can do add some unique property value and create unique id like "filled-in-box-"+item.id. Here in example, I have suffixed item.id to create unique id. @foreach (var item in (SelectList)ViewBag.RoleId) { <input type="checkbox" name="SelectedRoles" value="@item.Value" class="filled-in" id="[email protected]" /> @Html.Label(item.Value, new { @for = "filled-in-box-"+item.id }) } OR Just get rid...
javascript,jquery,html,css,materialize
From your picture, I assume you want the parralax image to be right below the nav right?… which I think is fixed. Well, just do a margin-top: to the main-container, and it will put it right below the nav. Another way could be adding a new div class="top-fill" above main-container...
javascript,design,materialize,materializecss
You have to use .checked For example: Javascript: document.getElementById('mySwitch').checked JQuery: $('#mySwitch').prop('checked') I hope that I help you....
Set your parent div #jam {text-align: center; width: 100%;} and your child div #readWrite {margin: 0 auto;} ...
javascript,css,materialize,materializecss
If double-click isn't essential for other functionality, you can optimize by dropping both double-click and textarea leaving just <p> with added attribute contentEditable="true". Also use onBlur event listener to save edited text. So in jade file you would have this: div.row each cards div.col.m4.s12 div.card.teal div.card-content.white-text p(contentEditable="true") #{text} And in...
php,html,css,laravel-5,materialize
So someone helped me over the gitter forum... Though this might not be the correct way solution, but this definitely solves the problem. {!! Form::button('<span class="mdi-content-send right"></span> Submit', array('class'=>'btn waves-effect waves-light center signup_btn', 'type'=>'submit')) !!} Some padding needs to be applied to the span, so that submit and the icon...
You will have no luck with float elements, they do not obey vertical-align. Use display:inline-block; instead, so that the elements could be align vertically. Please beware of the white space between the inline-blocks elements. You may change the font-size of the outer level of elements to (0) and then set...
css,ruby-on-rails,ruby,materialize
I looked in the materialize documentation and i found out that i just had to add the class browser-default to my collection-select (link to docs http://materializecss.com/forms.html) <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %> ...
jquery,html,web,materialize,materializecss
You are loading the jQuery library twice. I suggest you remove the last one(at line 271).
python,django,material-design,django-formwizard,materialize
changing the form template to below fixes the issue: <form action="" method="post"> {% csrf_token %} {{ wizard.management_form }} {% if wizard.form.forms %} {{ wizard.form.management_form }} {% for form in wizard.form.forms %} {% form %}{% endform %} {% endfor %} {% else %} {% form form=wizard.form %}{% endform %} {% endif...
Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and then call $(document).ready(function() { $('select').material_select(); }); after you've loaded that file....
Your markup for the grid is incorrect. Use a row to include the columns. I don't think a class like s0 exists. Please read the docs: Materialize Grid You can change your markup to: <div class="row"> <form id="shiftform" class="col s12 m12 l12"> <div class="form-group col m4 l4"> <img src="http://placehold.it/300x300" />...
javascript,html,dom,meteor,materialize
Meteor is not responsible for inserting this markup inside your application DOM, it's the MaterializeCSS framework that is inserting this hiddenDiv as you can tell from the source code : https://github.com/Dogfalo/materialize/blob/master/js/forms.js#L98 Apparently, is has something to do with automatic resizing of textareas....
javascript,jquery,meteor,materialize
Looks like only way are to to wrap the added/removed element in its own nested template, and then listening onRendered there. (As stipulated in this comment) Now I have rewritten code like this: Template._header_dropdown.onRendered(function(){ console.log('onRenderedDropdown'); $(".dropdown-button").dropdown(); }); with html part <template name="_header"> <nav class="light-blue" role="navigation"> <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</a>...