materialize

Materialize swipe tabs not working in modal

由 我是研究僧i 提交于 2019-12-11 04:27:40
问题 I am encountering a strange problem. I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore $(document).ready(function() { $('.modal').modal(); $('.tabs').tabs({ swipeable: true }); }) div.tabs-content.carousel.carousel-slider { height: 200px !important; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https:/

Getting chips data in Materialize css through Post

由 本秂侑毒 提交于 2019-12-11 04:03:50
问题 I am trying to get the data using the Materilize css's chips. But no data is received when I try to submit it using a form. I checked that the input fields value was null once I added the chips. I wrote a jquery code to verify this $('#showvalues').on('click', function(){ alert($('#emotiontags').val()) }) and my chips code looks like <div class="chips chips-autocomplete col s4 offset-s3"> <input placeholder="You Emotions" id="emotiontags" type="text" name="emotiontags"> </div> <button class=

materialize css: Always show side-nav even on mobile?

由 谁说我不能喝 提交于 2019-12-11 01:45:47
问题 I am using materialize css. I'm using side nav and want to set visible even on mobile. I'm using following code for this but its not working. @media only screen and (max-width: 992px) { .side-nav{ visibility: visible; opacity: 100; } } Its keep on hiding on small screen. 回答1: Materialize uses CSS transformations to show/hide the side nav, so altering the visibility or opacity will not help you here. A very quick solution is just to fix the translateX transformation at 0. This should make your

values not showing up in select button

由 China☆狼群 提交于 2019-12-10 21:27:09
问题 I am trying to get options in select button but its not showing up. my code is as below: index.html: <select ng-model="main.order" ng-options="order as order.title for order in main.orders"></select> app.js: $http.get('src/json/sortingKeys.json').success(function(response){ vm.orders = response.orders; vm.order = vm.orders[0]; }); Before it was working fine and i was getting values in select options. but then I wanted to use material design from http://materializecss.com/about.html. I have

materialize best practice validate empty field

由 妖精的绣舞 提交于 2019-12-10 13:38:56
问题 i use this form <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s12"> <input id="email2" type="email" class="validate"> <label for="email2" data-error="wrong" data-success="right">Email</label> </div> <div class="input-field col s12"> <input id="example" name="example" type="text" class="validate" required="" aria-required="true"> <label for="example" data-error="wrong" data-success="right">Field</label> </div> </div> </form> </div> mail field is ok. if

How do I get the Materialize select dropdown to work with React?

由 你离开我真会死。 提交于 2019-12-10 13:36:57
问题 Adding the following template code provided by Materialize doesn't immediately work in a React component: <div class="input-field col s12"> <select> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Materialize Select</label> </div> How do fix this so that the select dropdown works? 回答1: You need to make a few adjustments to get this working. First, import

Materialize - Collapsible with a huge content does not scroll to top of the tab

由 时光毁灭记忆、已成空白 提交于 2019-12-10 04:48:39
问题 I use the collapsible component provide by materialize framework. I get one bug and have no idea how to solve it or find a workaround. If the content of one tab is too huge, when I open the tab it does not scroll to the top of the tab itself (it goes to the middle). You can try it here : https://jsfiddle.net/r8314ouq/. Open the first tab then open the third tab you'll see that it doesn't scroll to the beggining of the tab. I see But I would like to see It's very annoying because the user has

Masonry in materializecss

由 ☆樱花仙子☆ 提交于 2019-12-09 23:07:13
问题 I would like to know if there is any way to have materializecss cards in a masonry-like display. I would like to avoid plugins like masonry, or having to compile sass, because this will be used on an aurelia application, and the configuration of external libraries and such pains me dearly. The closest thing I have come across is this: http://codepen.io/mike-north/pen/MwVoYp?editors=1100, which does so through: .cards-container { column-break-inside: avoid; .card { display: inline-block;

Materialize CSS, show images for autocompleted chips

由 情到浓时终转凉″ 提交于 2019-12-09 22:24:59
问题 Documentation for Materialize chips shows you can make chips with images: <div class="chip"> <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe </div> This works fine - and when we come to the autocomplete option, this also works: $('.chips-autocomplete').material_chip({ autocompleteOptions: { data: { 'Apple': null, 'Microsoft': null, 'Google': 'images/juna.jpg' }, limit: Infinity, minLength: 1 } }); As we have specified "images/juna.jpg" as the value for the "Google" property in the

Vuejs + Materializecss select field

由 人盡茶涼 提交于 2019-12-09 18:04:53
问题 I have this code in my template: <div class="input-field col s6"> <select v-on:change="selectChaned" v-model="item.size"> <option value="" disabled selected>Choose your option</option> <option v-on:click="optionClicked" v-for="size in case_sizes" v-bind:value="{{ size }}">{{ size }}</option> </select> <label for="size">Size</label> </div> According to Materializecss docs, I call $('select').material_select(); to transform default select field into something cutie. What it also does - it
订阅 materialize