Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 01:16
    GavHern edited #6506
  • 01:15
    GavHern edited #6506
  • 01:15
    GavHern opened #6506
  • Jan 22 12:35
    Sugson commented #5025
  • Jan 22 12:35
    Sugson commented #5025
  • Jan 21 11:16
    JoeBlack92 commented #6505
  • Jan 21 10:06
    pwcreative commented #6505
  • Jan 21 10:05
    JoeBlack92 opened #6505
  • Jan 21 09:51
    ermarkar commented #3875
  • Jan 21 06:37
    geosigno commented #6444
  • Jan 21 01:27
    josh432 commented #6300
  • Jan 20 09:37
    pwcreative commented #6494
  • Jan 17 02:45
    chipcop106 commented #6494
  • Jan 17 02:43
    chipcop106 commented #6494
  • Jan 17 02:34
    chipcop106 commented #6494
  • Jan 16 14:57
    Dahkon commented #5690
  • Jan 16 14:47
    troncomputers commented #5690
  • Jan 15 20:45
    DanielRuf commented #6241
  • Jan 15 20:07
    L1ghtn1ng synchronize #6241
  • Jan 15 19:58
    L1ghtn1ng synchronize #6241
pedrodecarvalh
@pedrodecarvalh
Hello, im having troubles adding a <Select>
but when i take this part from code the select appears... can you help me?
<!-- Compiled and minified CSS -->
<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!

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