materialize

Re-init Materialize.css select box after removal from Knockout.js options array

不问归期 提交于 2019-12-08 17:36:27
问题 I have a select box where the options and selection are handled via Knockout.js. I want to style this using Materialize CSS. This works OK for the initial display of the select box, and when options are added to the Knockout.js 'options' observableArray by using the 'optionsAfterRender' binding to (re)initialize after each option has been added (wasteful, but works). When removing an option, Knockout.js does not provide anything similar to 'optionsAfterRender', so there is no obvious way to

velocity is not a function materialize showing error in meteor

戏子无情 提交于 2019-12-08 15:15:12
问题 materialize.js:3503 Uncaught TypeError: $(...).find(...).css(...).velocity is not a function (anonymous function) @ materialize.js:3503 jQuery.event.dispatch @ jquery.js:4665 elemData.handle @ jquery.js:4333 error in console shows up when I click on card (materailize) 回答1: It's Becuase you may be including another version on jquery in you head tag. When you install materailize with meteor it also adds jquery as its dependency. Both versions are conflicting with each other. All you need to do

Select option does not work in Rails using MaterializeCSS

此生再无相见时 提交于 2019-12-08 03:26:27
问题 I have a select option in my form_for in rails. It was working before I installed materialize but after installing it, it doesnt work anymore. Please see my code below: Game model class Game < ActiveRecord::Base GENRES = ['Action', 'Adventure', 'RPG', 'Simulation', 'Strategy', 'Sports', 'Others'] PLATFORMS = ['3DS', 'WII U', 'NX', 'PC', 'Playstation', 'XBOX', 'PS Vita', 'Mobile', 'Others'] end new.html.erb <h1> Add Game </h1> <%= form_for :game, url: games_path do |f| %> Title: <%= f.text

MaterializeCss modal Error openModal is not a function

百般思念 提交于 2019-12-07 18:01:41
问题 I have all requirements Jquery, Materialize.js sitting above my Js file however I get the warning openModal is not a function..I checked the modal name is right and I can run Materialize.toast so I know Materialize.js is working. Triggering with the button does not call the modal either. Here is the code.. Scripts: <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="/js/materialize.js"></script> <script type="text

How to override materializecss sass variables in vue?

ぐ巨炮叔叔 提交于 2019-12-07 12:24:44
问题 I'd like to change variables in materialize _variables.scss e.g. $primary-color: color("materialize-red", "lighten-2") !default; $primary-color-light: lighten($primary-color, 15%) !default; $primary-color-dark: darken($primary-color, 15%) !default; /*...*/ In my Vue 2 main.js I include materialize style like this require('materialize-css/sass/materialize.scss'); Because of !default I guess I need to include my _variables.scss before including materialize, but I don't know how. So what's the

Override Materialize CSS properties

怎甘沉沦 提交于 2019-12-07 05:33:10
问题 I have included first Materialize's CSS and then I have linked my css file. In which I have an example class that sets background-color property to red , but that doesn't override the default color (that's set by materialize-css). Here's an example: https://jsfiddle.net/79ss2eyr/1/ I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors. Here's what the inspector says: How should I do that and why my css properties

Change the default color of materialize.css input fields. I have attached screenshot

十年热恋 提交于 2019-12-07 04:14:21
问题 I have tried to add custom css, but not worked. I need to change the color of text after selecting the input fields. <div class="input-field form-group"> <input id="first_name" class="active validate form-control" name="first_name" type="text" value=""> <label for="first_name" class="mat-label">First Name</label> </div> 回答1: For the line color, I was able to change the default green to black with the css below. input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default)

materializeCSS collapsible active change icon.

巧了我就是萌 提交于 2019-12-07 02:09:10
问题 I am looking for some help with collapsible I am trying to change the icon on the headers when they are active but cant seem to solve the problem of if I click on another header without closing the first one having the proper icon being displayed. Here is a codepen with an example of my issue. http://codepen.io/FPC/pen/xZEWVY here is my code: <div class="container"> <div class="row"> <div class="col s6"> <ul class="collapsible popout" data-collapsible="accordion"> <li> <div class="collapsible

Align material icon with text on Materialize

心不动则不痛 提交于 2019-12-06 17:16:04
问题 Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it : I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help. Thank you. 回答1: That's one way to do it. Of course it depends on the icon, you have to find the specific font-size that will fit

Disable Touch on Materialize Carousel

送分小仙女□ 提交于 2019-12-06 16:38:54
It looks like no one has asked this question before since I've pretty much scoured the internet looking for a very simple answer. How would one go about disabling the ability to swipe left/right on the materialize carousel? in Materialize.js add/edit: var allowCarouselDrag = true; value: function _handleCarouselDrag(e) { if(allowCarouselDrag){ .... } } You can set the allowCarouselDrag variable per application. This is far from a perfect solution, and it might disable too much of the functionality in your case, I'm not sure. An option to turn this on/off would be much appreciated. But for my