Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 21 01:58
    jamesdwalker commented #6646
  • Jun 20 17:49
    rahultrivedi180 opened #6646
  • Jun 14 03:19
    luchillo17 commented #5396
  • Jun 14 03:18
    luchillo17 commented #5396
  • Jun 13 07:18
    krupall commented #6645
  • Jun 13 04:04
    axiaoxin opened #6645
  • Jun 08 20:30
    Cumbalin opened #6644
  • Jun 04 10:30
    Zaniyar commented #4655
  • Jun 04 10:28
    Zaniyar commented #4655
  • Jun 04 08:21
    pitichampi commented #2773
  • Jun 02 14:20

    acburst on gh-pages

    Patreon June (compare)

  • May 31 14:03
    Mayankgbrc commented #1376
  • May 31 14:03
    Mayankgbrc commented #1376
  • May 31 14:03
    Mayankgbrc commented #1376
  • May 27 09:19
    Sazzad226 commented #5346
  • May 27 09:18
    Sazzad226 commented #5346
  • May 27 09:18
    Sazzad226 commented #5346
  • May 22 11:49
    majioa edited #6643
  • May 22 11:49
    majioa edited #6643
  • May 22 11:49
    majioa edited #6643
Chuck McKnight
@cmcknight

Hey, I am trying to add a sidenav, with the link/button to open it on the navbar, but the link/button never seems to appear

Add show-on-large /show-on-extra-large to the button. It disappears on large/x-large screens otherwise. (Hat tip to @doughballs)

SPEARTECH
@SPEARTECH
Hey, all. Has anyone figured out how to change the indicator color in tabs? Changing things in the CSS doesnt seem to do anything for me :(
Sean Doherty
@doughballs

@SPEARTECH it's a little convoluted. As always, the best way is to use sass and set the colours before the css file gets put together. But manually:

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

Chuck McKnight
@cmcknight
Screen Shot 2021-06-11 at 2.51.34 PM.png
I've got a question about images. I have a collection of images that are of different widths and heights and I need to constrain them to a max height so they don't blow out of the row they are in. l've tried to constrain the width and height of the div they are in, but that doesn't seem to work.
    <div class="row product-row">

      <div class="prod-row-img s3 left">
        <img src="../img/products/001-00001.png" class="responsive-img">
      </div>

      <div class="prod-row-name-and-qty col s7">
        <div class="prod-row-item-title">
            <span class="item-title right-align">AHS-7 Advanced Heavy Shotgun</span>
        </div>
        <form>
          <div class="input-field right">
            <button><i class="fa fa-minus"></i></button>
            <input type="number" id="prod-row-1-qty">
            <button><i class="fa fa-plus"></i></button>
            <button class="remove-item"><i class="fa fa-trash"></i></button>
          </div>
        </form>
      </div>

      <div class="prod-row-total right-align right col s2">
        1,600Cr
      </div>

    </div>
  & .product-row {
    border-bottom: 1px solid grey;
    margin-bottom: 1rem;
    padding-bottom: 1rem;;

    & .prod-row-img {
      max-width: 20%;
      max-height: 10rem;

      @include response(lg) {
        max-width: 10%;

        & img {
          width: 100%;
          height: auto;
          max-height: 10rem;
          object-fit: contain;
        }
      }
    }

    & .prod-row-name-and-qty {
      & .prod-row-item-title {
        font-size: 1rem;
        font-weight: bold;
      }

      & .input-field {

        & input {
          max-width: 3rem;
          border: 1px solid grey;
          height: 1.2rem;
        }

        & .remove-item {
          margin-left: 2rem;
        }
      }
    }

    & .prod-row-total {
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
I tried using responsive-image but that doesn't work because it uses the entire page size.
Sean Doherty
@doughballs
@cmcknight .responsive-img is relative to the parent container, not page size. But for this situation, I'd probably either: 1) Set the images as backgrounds on a fixed sized div, and use background-size: contain, or 2) Use width:100%; height: 100% and object-fit: contain. The latter won't work on IE. Stuff like this, keep it really simple. You don't need media queries or multiple controls for the width and height, once will do.
Martin Masevski
@Archetipo95
Hi everyone, I'm new here, sorry if I make mistakes or ask dumb questions, I'll try not to.
Sean Doherty
@doughballs
👋
Martin Masevski
@Archetipo95
I logged to ask a question about unit testing with jest, I'm trying to assert a Toast creation and I'm a bit lost, could someone give me some hints. I'd tried to mock the constructor, but it gives me "undefined"
Sean Doherty
@doughballs
Never done any testing myself, maybe someone else can help…
Chuck McKnight
@cmcknight

@cmcknight .responsive-img is relative to the parent container, not page size. But for this situation, I'd probably either: 1) Set the images as backgrounds on a fixed sized div, and use background-size: contain, or 2) Use width:100%; height: 100% and object-fit: contain. The latter won't work on IE. Stuff like this, keep it really simple. You don't need media queries or multiple controls for the width and height, once will do.

OK. I'm still surprised that anyone uses IE. Lol.

Chuck McKnight
@cmcknight
div-spacing-question.png
How can I decrease the height of the blue div to not expand vertically? There is way too much vertical space between the first line of text and the second (it's a single anchor tag).
<div class="product-row row">

      <div class="prod-img col s3">
        <a href="#">
          <img src="../img/products/001-00001.png" class="responsive-img">
        </a>
      </div>

      <div class="prod-details col s6">
        <div class="prod-title blue lighten-3">
            <a href="#" class="black-text">AHS-7 Advanced Heavy Shotgun</a>
        </div>
        <div class="prod-qty">
          <form class="prod-qty">
              <button><i class="fa fa-minus"></i></button>
              <input type="number" id="prod-row-1-qty">
              <button><i class="fa fa-plus"></i></button>
              <button class="remove-item"><i class="fa fa-trash"></i></button>
          </form>
        </div>
      </div>

      <div class="prod-total col s3">
        <p>Cart Total<br>100.6 MCr</p>
      </div>

    </div>
.shopping-cart-container {
  overflow: scroll;
  margin-top: 3rem;
  border-bottom: 1px solid grey;
  background: pink;

  & .cart-total {
    & h5 {
      font-size: 1.2rem !important;
      font-weight: 700;
    }
  }

  & .product-row {
    border-top: 1px solid grey;
    padding-top: .5rem;
    gap: 0;

    & .prod-img {
      & img {
        width: 5rem;
        height: 5rem;
        object-fit: contain;
        border: 1px solid #ccc;
      }
    }

    & .prod-details {
      display: flex;
      flex-direction: column;

      & .prod-title {
        justify-self: baseline !important;

        & a {
          font-size: .8rem;
          font-weight: bold;
        }
      }

      & .prod-qty {
        width: 100%;
        font-size: 1rem;

        button {
          font-size: .8rem;
          height: 1.2rem;
          width: 1.2rem;
        }

        & input {
          max-width: 3rem;
          border: 1px solid grey;
          line-height: 1rem;
          max-height: 1rem;
          text-align: center;
          font-size: .8rem;
        }

        & .remove-item {
          margin-left: 2rem;
        }
      }
    }

    & .prod-total {
      & p {
        font-size: .8rem;
        font-weight: bold;
      }
    }
  }
Chuck McKnight
@cmcknight
I know that I'm missing something here that may be obvious, but I'm just not seeing it...
Chuck McKnight
@cmcknight

Or alternatively, is there a better way to layout that row? 🤔🤔

I've added col definitions for medium and large and those look okay other than my quantity controls don't respond to justify-content: space-between on the center div. 🤔

Sean Doherty
@doughballs
@cmcknight that is probably line height on the a tag. Reduce to 1em or something.
dnaelec
@dnaelec
Hi i'm new to development and trying to develop my own apps for my business. I'm having trouble implementing an event listener on a button on my page.

the script i've written is: <script>

document.getElementById("btn").addEventListener("click", function(){

var eventInfo = {};

eventInfo.service = document.getElementById("Service").value;
eventInfo.time = document.getElementById("Time").value;
eventInfo.email = document.getElementById("email").value;
eventInfo.firstName = document.getElementById("first_name").value;
eventInfo.lastName = document.getElementById("last_name").value;
eventInfo.address = document.getElementById("address").value;
eventInfo.phone = document.getElementById("phone_number").value;
eventInfo.date = document.getElementById("date_picker").value;

Google.script.run(userClicked);

document.getElementById("Service").value = "";
document.getElementById("Time").value = "";
document.getElementById("email")value = "";
document.getElementById("first_name").value = "";
document.getElementById("last_name").value = "";
document.getElementById("address").value = "";
document.getElementById("phone_number").value = "";
document.getElementById("date_picker").value = "";
});

</script>
sendthistojoshua
@sendthistojoshua:matrix.org
[m]
google.script.run.functionName( parameter );

also:
google.script.run.withSuccessHandler( function() {

document.getElementById("Service").value = "";
document.getElementById("Time").value = "";
document.getElementById("email")value = "";
document.getElementById("first_name").value = "";
document.getElementById("last_name").value = "";
document.getElementById("address").value = "";
document.getElementById("phone_number").value = "";
document.getElementById("date_picker").value = "";

} ).withFailureHandler( function( error ) {

document.write( error );

} ).functionName( parameter );

if userClicked is your function name sub it in for functionName
dnaelec
@dnaelec
thank you. I knew something was missing but I couldn't figure out what.
sendthistojoshua
@sendthistojoshua:matrix.org
[m]
you're welcome 👍️
Chuck McKnight
@cmcknight

@cmcknight that is probably line height on the a tag. Reduce to 1em or something.

That helped. Am I just doing overly complicated things? 🤔

Sean Doherty
@doughballs
@cmcknight generally speaking, the solution is often simpler than we think :)
Amir Mehrnam
@AmirMehr
Please add search for <select> elements like Select2 lib
Sean Doherty
@doughballs
@AmirMehr you can get closer to this function using autocomplete…
jshster
@jshster
hey all, has anyone had any issues EVER with the datepicker and the year drop down on a mobile device? When I use the emulator in Chrome everything works perfectly but on my phone and almost everyone else when you select a year in the year drop down 99% of the time it selects the wrong value. I've even held my finger on a year to make sure it's highlighting the right one.... and touch 1977 and it selects.... 1979 or 1980. It's not always out by one and sometimes it will select the right one. I'm going to have to replace it temporarily because I don't have time to debug but will try to post a test page you can test on. In fact I've just confirmed this behaviour on the materializecss.com website so it's clearly an issue somewhere. Anyone seen this?
Sean Doherty
@doughballs
@jshster datepicker uses dropdown, which uses select, and select has had an issue in later iOS. There is a patch to fix it already around. You also might want to consider developing with the fork, as that is actively being maintained and the latest release has fixed that and a bunch of other stuff as well.
Amir Mehrnam
@AmirMehr
@doughballs You are right, but still see all options with search at same time would be great
Sean Doherty
@doughballs
@AmirMehr check out the fork, is has been raised as a potential improvement in the past I think…https://github.com/materializecss/materialize
Acoder-Ana
@Acoder-Ana

Hi developers
We are Ukraine based IT startup and we are looking forward to hiring 2 (two) React.js developers in a few days.
Recruitment process is simple.

  1. There is a small test project to get qualified.
  2. Once you have finished the task, you will be required to send your CV.

If you are interested, DM me
Regards.
Andrei

Chuck McKnight
@cmcknight

I have a question about the sidenav and collapsible accordion items. I have the following code:

  <ul id="slide-out" class="sidenav">
    <li class="right-align">
      <a href="#" class="white black-text sidenav-close">
        <i class="material-icons right">close</i></a>
    </li>

    <li><a href="{{ '/' | url }}">Home</a></li>
    <li><a href="{{ '/shopping-cart' | url }}">Shopping Cart</a></li>

    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li>
          <a class="collapsible-header">Filters<i class="material-icons">arrow_drop_down</i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#!">Department</a></li>
              <li><a href="#!">Manufacturer</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>

    <li><a href="{{ '/' | url }}about-the-central-supply-catalog/">About</a></li>

  </ul>

that produces the following display:

Screen Shot 2021-06-21 at 9.28.23 AM.png
My expectation would be that the About item would go back to being left aligned with the Home and Shopping Cart items. Should I be aligning the icon to the right to get that effect?
The "dropdown" part was copied directly from the Materialize CSS Sidenav page. 🤔
Sean Doherty
@doughballs
Try the class ‘right’ on the icon. Should be to the right anyway I think…
Chuck McKnight
@cmcknight
Screen Shot 2021-06-21 at 9.35.13 AM.png
Weird, still coming out misaligned. 🤔
I tried pulling the no-padding class off of the UL but no love there either.
Chuck McKnight
@cmcknight
Guess I'll change the Filters option to use a modal dialog instead. Weird, still coming out misaligned. 🤔
I think the right class just does a float right but it seems to take the whole thing out of the flow... 🤔
Sean Doherty
@doughballs
You sure you used the correct markup? I don’t remember a loose a tag as the collapsible header?
Chuck McKnight
@cmcknight
This is the example from the website:
<ul id="slide-out" class="sidenav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
Sean Doherty
@doughballs
So the only difference is you added an icon?