changing width from which the columns begin to stack vertically
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...
How to get the value form Materialize's Switches?
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....
Suggested method to override button background colour?
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> ...
Store and retrieve HTML in Mongo (i.e. using to format text pulled from DB) [duplicate]
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> ...
Materialize CSS - Select Doesn't Seem to Render
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....
Materialize.css remove styling from input element
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...
Why my meteor app create “hiddendiv common” div tags?
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....
Making scalable columns with Materialize
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" />...
Materialize sideNav() and dropdown() not working
jquery,html,web,materialize,materializecss
You are loading the jQuery library twice. I suggest you remove the last one(at line 271).
Behaviour of materialize navbar is broken when meteor app is compiled for android
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...
Django formwizard breaks after adding css style django-material
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...
Cant add collection_select while using materialize rails 4.2
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" %> ...
Materializecss dropdown menu not working with angularjs
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...
Parallax image shows at top of page on load
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...
Aligning text next to a button with materialize CSS
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...
Margin Auto renders to Margin 0px
Set your parent div #jam {text-align: center; width: 100%;} and your child div #readWrite {margin: 0 auto;} ...
Increment or decrement class name with jQuery
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 +...
how to style razor forEach inline check boxes
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...
Styling a button in the Form::submit
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...
ScrollFire plugin seems not to be working
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); ...
Meteor event when template is updated
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>...
Vertically centering a button in its own div within another div
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...