How to increase or decrease the size of the css materialize datepicker?

Asked

Viewed 1,160 times

0

Well, I have a problem with the materialize datepicker, I made an Nav side and wanted to put a form to choose a date. I did, but when I click on that form, it opens up all the way. inserir a descrição da imagem aqui

My code:

<!DOCTYPE html>
<html>

<head>
  <!-- Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Compiled and minified CSS -->
  <link type="text/css" rel="stylesheet" href="../public/css/materialize.min.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="../public/css/style.css" />
  <link type="text/css" rel="stylesheet" href="../public/css/font-awesome.css" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

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

<body id="layout">
  <header>
    <div class="navbar-fixed">
      <nav class="indigo darken-4 top-nav">
        <div class="nav-wrapper">
          <a href="#" class="brand-logo">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                 <img src="../public/images/logo.png">
            </a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">

          </ul>
        </div>
    </div>
    </nav>
  </header>
  <!-- layout -->
  <div class="wrapper">
    <div class="row">

      <ul class="side-nav fixed hoverable indigo">
        <li class="indigo darken-1 z-depth-2">
          <div class="row">
            <br /><br>
            <div class="col s4 m4 l4">
              <img src="../public/images/989.jpg" alt="" class="circle responsive-img">
            </div>
            <center>
              <div class="col s12 m8 l8">

                <!-- Dropdown Structure -->
                <ul id='dropdown1' class='dropdown-content'>
                  <li><a href="#"><i class="material-icons indigo-text text-darken-4">face</i> Perfil</a>
                  </li>
                  <li><a href="#"><i class="material-icons indigo-text text-darken-4">keyboard_tab</i> Sair</a>
                  </li>

                </ul>
                <!-- Dropdown Trigger -->
                <a class='dropdown-button btn indigo darken-3 col s12' href='#' data-activates='dropdown1'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspRafael<i class="material-icons right">arrow_drop_down</i></a>

                <p class="white-text">Professor</p>
              </div>
            </center>
          </div>
          <div class="col s12">
            <form>
              <center>
                <h4 class="white-text">Nova Prova</h4>
              </center>
              <input type="text" class="datepicker small">
            </form>
          </div>
</body>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script type="text/javascript" src="../js/app.js"></script>

<!-- efeito do botão -->
<script>
  $('.fixed-action-btn').openFAB();
  $('.fixed-action-btn').closeFAB();
  $('.fixed-action-btn.toolbar').openToolbar();
  $('.fixed-action-btn.toolbar').closeToolbar();
</script>
<!-- fim efeito botão -->

<script>
  $('.dropdown-button').dropdown('open');
  $('.dropdown-button').dropdown('close');
</script>
<!-- select -->
<script>
  $(document).ready(function() {
    $('select').material_select();
  });
</script>
<!-- fim do select -->

<!-- data -->
<script>
  $('.datepicker').pickadate({
    monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    weekdaysFull: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
    weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    today: 'Hoje',
    clear: 'Limpar',
    close: 'Pronto',
    labelMonthNext: 'Próximo mês',
    labelMonthPrev: 'Mês anterior',
    labelMonthSelect: 'Selecione um mês',
    labelYearSelect: 'Selecione um ano',
    selectMonths: true,
    selectYears: 15
  });
</script>
<!-- fim data-->

</html>

If anyone knows how to increase or decrease the size of this calendar, I would be very grateful. Sorry if I couldn’t explain my doubt right, I’m kind of new here. Thanks for the attention, hugs!

css datepicker materialize

1 answer

0


You can edit the Materialize datepicker in your custom css by calling the class: . picker__box, ai and just set how much width and height you want. You can customize other elements inside the box by calling the classes: . picker__date-display, . picker__weekday-display.

Example:

.picker__box{ 
  margin: 60px;
  width: 150px;
} 
.picker__date-display, .picker__weekday-display{
  background-color: #408080;
}

Browser other questions tagged css datepicker materialize

You are not signed in. Login or sign up in order to post.