Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

pedrodecarvalh

@pedrodecarvalh

Hello, im having troubles adding a <Select>

but when i take this part from code the select appears... can you help me?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Matteo Shermadhi

@sher149

Hi, i put the scrollspy to the code: if i click the button it reach me to the bottom, but it doesn't show me the graphic "scroll" effect. (Sorry for my bad english)

@pwcreative

Sean Doherty

@doughballs

@sher149 did you initialize the scrollspy in your js file? And did you add a class of 'scrollspy' on the element you want to scroll to?

@pedrodecarvalh did you initialize the select?

  $(document).ready(function(){
        $('select').formSelect();
   });

https://materializecss.com/select.html

Matteo Shermadhi

@sher149

i have to initialize it in js?

Sean Doherty

@doughballs

@sher149 As stated above in my original answer.

 $(document).ready(function(){
        $('.scrollspy').scrollSpy();
  });

Matteo Shermadhi

@sher149

ok, thank you so much Sean

materialize is great btw... today i did my first web site :)

jjrael

@jjrael

Hi, the select does not seem to work on mobile. Here is a tutorial I was doing. It is fine on a laptop but not on my iphone. I can't select the crop name: https://script.google.com/macros/s/AKfycbxcXSzve7v6HIAy07S5sZCF8-pIei2ZX5L7laXvtFrMeh6SoLc/exec

Daniel Ruf

@DanielRuf

Do you use some hover? When I press an option longer on mobile it works. Which tutorial did you use and which materialize version is this @jjrael?

Mago Mandrake

@sabroso

When does the new version come out?

jjrael

@jjrael

@DanielRuf I don't know what hover is. On my iphone, I push the selector and the list appears but when I make the selection, it does not stick. If I hold, it asks me to look up the term. This is version 1.0.0. I adapted from this tutorial: https://script.google.com/macros/s/AKfycbwERA4d5q6ki7mmJnvHwxWQZbJZ0yI7dEpU175J7ZhzbK9qJeIE/exec

Ghost

@ghost~5e26b4c5d73408ce4fd74772

"TypeError: this.dropdownEl is null" when creating multiple dropdown navigations, anyone has any idea why? I implemented this solution: Dogfalo/materialize#2621 given by singhshashi but it's still not working. Any help is appreciated.

pwcreative

@pwcreative

@jjrael kinda hard to help because we can't see the source html. The select behaviour you're experiencing is not typical Materialize select behaviour., which suggest it's something else in your code, and probably why Daniel was asking about hover. There is an issue with the wrong item being selected on iOS, but there is a temporary fix and your example is not selecting at all. Can you break your code up into a codepen so we can see the markup properly?

@ghost~5e26b4c5d73408ce4fd74772 Link please, and then we can help.

pwcreative

@pwcreative

@jjrael Also, this is not optimised for mobile. The button is tiny (tap areas should be a min 40px h/w), and in general, you would stack your inputs on mobile (col 12) and only move to 2 cols on tablet (m6). When you press into the select, you get this zoom right into the page - very disorientating, and bad UX. If you're using Materialize you should follow the conventions of the docs as closely as possible, which you notice has this line here:

    <!--Let browser know website is optimized for mobile-->
          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

If can see a reference to this in whatever the script is in your body, but this should go in the head.

https://materializecss.com/getting-started.html

Benton Colley

@edwardcolley

hey guys, I was wondering if there was an easy way to stop the label from animating near inputs. Essentially, my error label is being affected and I was hoping there was a class I could remove via jQuery that could accomplish this.

I read on stackoverflow that you could remove "active" class, but this hasn't worked

jjrael

@jjrael

@pwcreative thank you!

Jack Sanchez

@ebbsanchez

@doughballs After I try couple of methods. I'll say this remain not fixable for now.
Adding row to each section will cause there head aligned and it is not waterfall displayed like Pinterest.

Second, the masonry style solution (https://codepen.io/aglio/pen/eGdVdQ) may be the better one but it need to adjust in some way since my cards got order. Additionally I want it to display like this:
1 2 3
4 5 6

unfortunately this solution displayed:
1

1 3 5
2 4 6

which may cause
1 4
2 5
3 6

in middle size screen. and it is not user friendly. :(

Jack Sanchez

@ebbsanchez

I may just left it right there and redesigned with this js package. http://raphamorim.io/waterfall.js/

thanks for helping along @doughballs

Sean Doherty

@doughballs

@ebbsanchez no worries, I actually just think I found the workaround, which is is to set a height on .card

It would need a few media queries to set the height at a couple of screen widths, but it's a small price to pay.

I'll look at a codepen shortly, just for my own sanity!

Sean Doherty

@doughballs

https://codepen.io/doughballs/pen/NWPEWRg

Actually just setting a height of 400px for these cards and using a bit of flex for the footer has achieved the desired result I think.

fuadnafiz98

@fuadnafiz98

is there any way to change the default theme color ?

Jack Sanchez

@ebbsanchez

@doughballs yeah, it is a way but you have got limited height :(

@fuadnafiz98 what do you mean default theme color?

https://materializecss.com/color.html
you can change any color by adding class

fuadnafiz98

@fuadnafiz98

@ebbsanchez like button color nav bar color etc

Jack Sanchez

@ebbsanchez

just add the color class

try this

<button class="red"> Red Button </button>

<button class="blue"> Red Button </button>

<button class="green"> not Red Button </button>

the link I give you got color list

fuadnafiz98

@fuadnafiz98

@ebbsanchez Thanks for this :)

Sean Doherty

@doughballs

@fuadnafiz98 the default theme colour can be changed using Sass. If that is what you're trying to do, and you're interested, I'll explain how to do it.

@ebbsanchez I suppose it depends on your project whether that is an issue. For instance, while masonry grid works well for Pinterest and visual galleries, IMO it doesn't work as well for more information led content like blogs, where consistently sized content blocks might be more that 1) the user is expecting and 2) actually works better. The only way to account for content with different heights in this scenario is to fix the card height to the tallest.

Jack Sanchez

@ebbsanchez

@fuadnafiz98 you should know that materialize.css is just css, which they are predefined css file and you can change color through css/sass like @doughballs have mentioned . you should learn css if you don't know what it is.
https://www.w3schools.com/css/

@doughballs yeah. you are right. I'll think around on my layout design.

Jack Sanchez

@ebbsanchez

btw, this is the website I'm working on
http://afternoon-beach-38581.herokuapp.com/

Ivan3628

@Ivan3628

Hi, I am trying to create JavaScript CRUD app where among other things I want to be able to select the value of a radio button so that i can update it, however my current solution isn t working.Any suggestions?

HTML

 <p>
              <label>
                <input name="type" type="radio" value="personal" checked />
                <span>Personal</span>
              </label>

              <label>
                <input name="type" type="radio" value="profesional" />
                <span>Profesional</span>
              </label>
            </p>

app.js

 const type = document.querySelector('input[name="type"]:checked').value;

NagaveniA

@NagaveniA

hii i am trying append the response from ajax to the select option but i am unable to append it can someone help me on this pleasw

Where communities thrive

People

Repo info

Activity