FAQ Database Discussion Community


Parallax image shows at top of page on load

javascript,jquery,html,css,materialize
For some reason I am having this weird CSS issue but I have no idea on how to fix it. I'm using the Materialize CSS framework. When the page loads, the parallax element appears on top of the page, strangely. It disappears when the user scrolls. Here's a picture of...

Making scalable columns with Materialize

css,materialize
I have this form that has 3 columns. I want these columns to stack once the screen passes a certain width: <form id="shiftform" class="col s12 m12 l12"> <div class="form-group col s0 m4 l4"> {!! Form::label('shift_description', trans('crud.shiftdescription'))!!} {!! Form::text('description', null, array('id'=> 'shift_description')) !!} {!!$errors->first('description', '<span class=error>:message</span>')!!} </div> <div class="form-group col s0...

Materialize.css remove styling from input element

javascript,css,materialize,materializecss
I want to make Materialize.css cards editable on doubleclick. To do that I place input within card div, instead of p. div.row each cards div.col.m4.s12 div.card.teal div.card-content.white-text if openCard //input(type='text' value='#{text}') textarea.materialize-textarea #{text} else p #{text} problem is that input (and textarea) elements have extensive material design styling, including line...

Styling a button in the Form::submit

php,html,css,laravel-5,materialize
In the standard method a submit button in my form is as <button class="btn waves-effect waves-light center signup_btn" type="submit"> Submit <i class="mdi-content-send right"></i> </button> I am using materialize.css Now how can i achieve the same UI using the FormBuilder of the Illuminate\Html package {!! Form::submit('Submit',['class' => 'btn waves-effect waves-light center...

Store and retrieve HTML in Mongo (i.e. using to format text pulled from DB) [duplicate]

javascript,html,mongodb,meteor,materialize
This question already has an answer here: Retreiving HTML from MongoDB for use in Template 1 answer I'm using Meteor and I have a template that retrieves text from Mongo and displays it in a Materialize <p class="flow-text">. However, I would like to apply some formatting to this text,...

Margin Auto renders to Margin 0px

jquery,html,css,materialize
I have the following css for a div : #readWrite{ width:100%; display: block !important; margin-left: auto; margin-right: auto; } But, when I open in Chrome, the margin renders to 0px and hence the div is not centered. How to resolve this? If I do putmargin's exact values, it works. But...

Suggested method to override button background colour?

css,material-design,materialize,materializecss
How should I go about changing background-color CSS property for <button> element using Materialize CSS? It seems that for most other elements simply adding a class of, for example, .red or .yellow will change the background colour, but not for the button elements. Is there any non-obtrusive way? EDIT: To...

Meteor event when template is updated

javascript,jquery,meteor,materialize
I am trying to use Materialize with Meteor, and I have hit a bump on how to initialize Materialize javascript, when adding/removing emelents from dom. Usecase is simple - navbar contains login/register functions when user has not logged in, when she is logged in, there is a dropdown (that requires...

Increment or decrement class name with jQuery

javascript,jquery,css,materialize
I'm using the Materialize CSS (http://materializecss.com/) framework which has (admittedly, a bloated stylesheet full of) class names for colours; class names follow the logic: .blue {} .blue.darken-1 {} .blue.lighten-1 {} "Darken" and "lighten" increment from 1-5. I am trying to write a function that increments the class on hover; because...

Materializecss dropdown menu not working with angularjs

javascript,html,css,angularjs,materialize
I'm developing a web app using Materializecss and AngularJS for the frontend, my problem is that the dropdown menu component of materialize doesn't work for me. Here's the example dropdown on their site $( document ).ready(function(){ $(".dropdown-button").dropdown(); }); <!-- Dropdown Structure --> <ul id="dropdown1" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li...

Cant add collection_select while using materialize rails 4.2

css,ruby-on-rails,ruby,materialize
I have created a categories model with a migration with a category_id (basically everything Mackenzie Child does in his video https://www.youtube.com/watch?v=814gCeOpM4o from 25minutes) and I want it to show up in my form. It doesn't work, my collection_select wont show up on screen but it will show up in the...

Django formwizard breaks after adding css style django-material

python,django,material-design,django-formwizard,materialize
I have my Django project using a base template for rendering the views as in the following paste http://pastebin.com/uUZT40ge called from root as base.html , and django-material https://pypi.python.org/pypi/django-material providing the style and layout for the form elements.With a simple for such as below it works ok: {% extends "base.html" %}...

how to style razor forEach inline check boxes

css,asp.net-mvc,razor,materialize
I am trying to style razor syntax with materialize css. this is what I have right now. Which doesn't work, the check boxes cannot be checked. <div class="form-group"> <div class="col-md-12"> @foreach (var item in (SelectList)ViewBag.RoleId) { <input type="checkbox" name="SelectedRoles" value="@item.Value" class="checkbox-inline" /> @Html.Label(item.Value, new { @class = "control-label" }) }...

ScrollFire plugin seems not to be working

javascript,materialize
It seems that for some reason ScrollFire plugin is not working. Using official guide I have created a plunker demo. Core javascript is the following: Materialize.scrollFire({ selector:".whoosh", offset: 10, callback: "alert('fired')"}); It assumes that when scrolling down to image an alert must pop up, but it does not. Any ideas...

Behaviour of materialize navbar is broken when meteor app is compiled for android

cordova,meteor,materialize
I'm currently attempting to make a material design version of the simple todos tutorial app on the meteor website. I'm however having an issue getting the nav bar buttons to actually do anything when touched when the app is compiled for android. A gif of the issue - http://i.imgur.com/vRMhIfy.gif HTML...

How to get the value form Materialize's Switches?

javascript,design,materialize,materializecss
I'm using the Materialize library and I'm trying to retrieve the value from the switches component, but it always returns on regardless of it being turned on or off. Is there a way to determine if it's switched on or off, programatically?...

Vertically centering a button in its own div within another div

html,css,materialize
I am currently attempting to vertically center the buttons with the rest of the '.row'. Here is currently what I have. I have tried using things like adding style="vertical-align: center;" to different elements but the buttons do not move. The only solution I have found is to move them down...

Aligning text next to a button with materialize CSS

html,css,alignment,materialize
I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now: Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for...

Materialize CSS - Select Doesn't Seem to Render

html,css,materialize
I am currently working with materialize CSS and it seems I've gotten snagged with the select fields. I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else might be able to help. What I am trying to...

Why my meteor app create “hiddendiv common” div tags?

javascript,html,dom,meteor,materialize
I'm wondering why my meteor app create some tags like this for no reasons? <div class="hiddendiv common"></div> Thank you...