Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 12 12:28
    ray-den commented #192
  • Apr 08 22:52
    seita1996 opened #6634
  • Apr 06 08:04
    nh916 commented #6633
  • Apr 06 04:06
    ManuTheCoder closed #6631
  • Apr 03 09:36
    denisolyanyuk commented #6449
  • Apr 03 09:36
    denisolyanyuk commented #6449
  • Mar 31 15:15
    immortaly007 commented #1527
  • Mar 31 14:05
    dargmuesli commented #6142
  • Mar 31 14:02
    Smankusors commented #3249
  • Mar 31 14:02
    Smankusors commented #6142
  • Mar 30 12:23
    coendr commented #1861
  • Mar 29 09:16
    roiLeo commented #6633
  • Mar 28 02:37
    betopicapiedra opened #6633
  • Mar 26 12:12
    ruant commented #4372
  • Mar 26 08:35
    harri00413 commented #4372
  • Mar 25 23:34
    nateleavitt commented #2582
  • Mar 24 13:55
    leonardorafael commented #6631
  • Mar 24 11:34
    Witzler closed #6632
  • Mar 24 11:34
    Witzler commented #6632
  • Mar 24 10:41
    jshster commented #6632
nh916
@nh916
is anyone working on materialize web accessibility?
nh916
@nh916
it seems like there is no tab accessibility for anyone who has any kind of disability
ManuTheCoder
@ManuTheCoder
Image
Check out my new app made with Materialize CSS---> https://smartlist.ga/
Check out the dashboard -->
https://i.ibb.co/pRMKr1Q/Screenshot-2021-03-13-at-5-50-36-PM.png
Sean Doherty
@doughballs
@ManuTheCoder good work!
1 reply
Filip Oščádal
@mxdpeep
@ManuTheCoder use OAUTH 2.0, not email sign-ups
ManuTheCoder
@ManuTheCoder

OAUTH 2.0

Hi,
Are you talking about "Sign up with Google"?

Tomasz Cieńciała
@TomaszCienciala
hi - is it just me or carousel page is broken ? https://materializecss.com/carousel.html
I mean lorempixel is down
and images are not loading
shammiac
@shammiac
hi, how to make preloading block the whole page, like to show the preloader as a modal like ..
ManuTheCoder
@ManuTheCoder

Try this:

<!DOCTYPE html>
<html>
  <head>
    <title>Loader Modal</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <style>
      .modal_bg {
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background: rgba(0,0,0,0.3);
        opacity:0;
        transform: scale(2);
        transition: all .2s;
      }
      .modal_content {
        position: fixed;
        top: 50%;
        transition: all .2s;
        left: 50%;
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 2px;
        padding: 15px;
        transform: translate(-50%, -50%)
      }
    </style>
  </head>
  <body onload='load()'>
    <div class="modal_bg" id="modal">
      <div class="modal_content">
        <div class="preloader-wrapper active">
          <div class="spinner-layer spinner-red-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div><div class="gap-patch">
            <div class="circle"></div>
            </div><div class="circle-clipper right">
            <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container"><br>
      <img src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/15/33/f9/c0/big-sur.jpg?w=1100&h=600&s=1" width="100%">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      // The setTimeout is used for demo purposes only. Please remove this, as it will slow your page down!
      function load() {
        var e = document.getElementById("modal");
        e.style.transform = 'scale(1)';
        e.style.opacity = '1';
        setTimeout(function(){
          e.style.transform = 'scale(2)';
          e.style.opacity = '0';
          setTimeout(function(){
            e.style.display = 'none';
          }, 0200);
        }, 3000);
      }
    </script>
  </body>
</html>

Remove the setTimeout function (ONLY the one here:

}, 3000);

Ribbfors
@Ribbfors
Hey there,
I'm using three card modules next to each other in a row, but I can't seem to use flex-wrap: wrap; on them, so they get into column as the screen reaches a certain size. Does anyone know what I might be doing wrong?
Sean Doherty
@doughballs
@Ribbfors card don’t use flex, Materialize uses a % and float based grid system. Put each card in a col and let the grid take care of stacking.
Enot237
@enot237
hi all, i'm wanna to make horizontal scroll of cards in the row, but i didn't find any info about. can someone help me?
ManuTheCoder
@ManuTheCoder
@shammiac - You can set a parent div with an overflow:scroll
<div style="width:100%;overflow-x:scroll">
...
</div>
CobyChetwyn
@CobyChetwyn

Hi,

Does anyone know of a way to make the datepicker (https://materializecss.com/pickers.html) inline, so it shows on a page without having to trigger it to open?

Similar to this - https://jqueryui.com/datepicker/#inline

Sean Doherty
@doughballs
@CobyChetwyn there is nothing out of the box to do this. You can always trigger it yourself so that it’s open on page load, but not sure that would be good UX
dory
@minhduc19

<a class='dropdown-trigger btn' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->

<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

HI, some how my drop down doesn't work!
I've already included the js trigger at the top
dory
@minhduc19
I've tested the 0.0.2 but it doesn't work as well

<!-- Dropdown Trigger -->

<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->

<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

dory
@minhduc19
hmm! I loaded jsquery before materialise!
Sean Doherty
@doughballs
Have you fixed it? JQuery should come first (if you use it, but you don’t need it), then materialize, then your own init.
sajo811
@sajo811:matrix.org
[m]
Hey! How would I go about hiding a materialize element and making sure that it doesn't take any space? Usually I'd do style.display = 'none'; but that doesn't seem to work for materialize buttons
sajo811
@sajo811:matrix.org
[m]
I can do this with a normal HTML element but it doesn't work for materialize: https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page
And it seems adding the .hide class doesn't prevent it from taking up space either
Gaurav Gupta
@gauravgupta98
Guys, I've been working on React and built a Instagram clone. Checkout the demo here - https://instagram-clone-a159b.web.app/
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/instagram-clone
Don't be lazy to give a star on the repo ;)
Sean Doherty
@doughballs
@sajo811:matrix.org when you say "prevent it from taking up space" - do you mean physical space? The class of .hide hides the element, stopping it from being displayed and taking up physical space.
1 reply
sajo811
@sajo811:matrix.org
[m]
Figured it out! As I suspected, the column was taking up space. I just needed to deal with that. Thank you! @doughballs
jshster
@jshster
image.png
hey all, hoping someone can come up with an inspiring idea. Got a set of tabs appearing on the home page. Works fine on a monitor or decent size device but as you can see in the image posted .... the truncation of the tab titles isn't a good look. I almost think it would be better to hide the tab headers and then display each tab one underneath each other on a mobile device. Anyone got any idea on how I might be able to disable the materialize tabs if on a mobile device? Or should I just use custom CSS to hide the tab headers and manipulate the display of the tab content? Appreciate anyone's thoughts on this.
Sean Doherty
@doughballs
@jshster personally i would just reduce the text size on mobile so that it fits, or reduce the length of the tab titles, or even replace with icons on mobile. I’ve done all three in the past and I tend not to use them anymore for this reason.
fajarmaulanayusup
@fajarmaulanayusup

sorry
who can help me

i have proble with date picker
if make 2 or multiple date picker not working to change month or year

@Dogfalo pls help me about multiple date picker
pferioli
@pferioli
Hi Folks ! i'm kind of new using materializecss and i have an issue that i cannot understand, when i deploy the app in Google Application Engine, it looks bigger than if i run the same code locally in my pc. Does anyone have any idea to point me in the right direction to find out why is it happening ? Thanks in advance !
darklight
@darklightcode
Hello there ! I've put up a website to compile a starting theme, just wanted to share in case someone finds it useful. Glad to see the project is still active !
Materialize Online
Sean Doherty
@doughballs
@darklightcode nice work!
erasmusdr
@erasmusdr
Hi all,
I need help as I'm new to materialize, I've got a website build with materialize but how do I edit the site. as the person who build it is unavailable
Sean Doherty
@doughballs
@erasmusdr that's a pretty broad question. How is the site built? What do you need to edit?
ManuTheCoder
@ManuTheCoder
Check out this materialize "Expand/Shrink" FAB on scroll:
https://webcode.rf.gd/public/64
humble11
@humble11
hello all,
please i am finding it difficult to reduce the size of icon i used from Materialize, is it possible? if yes, how can i go about reducing it? i am a beginner. thanks
Sean Doherty
@doughballs
3 utility classes that can be added to the icon
Majd Haj Yehia - BestDr
@BestDr
Hey all,
I am facing an issue with Collapsibles in Materialize, I use the proper initialization method found in the Docs, but the Collapsibles are still opening without the Accordion behavior, even when I explicitly pass an Options object with accordion key set to true, and according to what I read in the Docs it should have the Accordion behavior by default without me passing it through an Options object, so can anyone help with that? (I also used both Vanilla and JQuery to initialize the Collapsibles)
Sean Doherty
@doughballs
@BestDr you need to show us the link, or build a codepen. Collapsible works just fine - so either your setup is wrong, or you’re not loading the correct styles and scripts in the right order, or you’re not using the correct markup.