TEXT Within a button - Materialize CSS

Question

TEXT Within a button - Materialize CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm having a hard time breaking text inside a button. I use materialize css but generally I have no idea how to put all the text I want inside a button, it always cuts the end of my titles and so on.

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


<c:when test="${p.parCodigoReg!=0}">
	<a href="impressaoBoleto.do?     codigoPar=${p.parCodigoReg}&parTipo=N&rel=boleto&portal=1" 
            target="blank" 
            class="waves-effect waves-light btn-large z-depth-4">
  <i class="large material-icons left">cloud</i>
    Imprimir Boleto de Mensalidade ParcelasRegulares   
  </a>
  <span>
    Próximo Vencimento: ${p.parVencimento}
  </span>
</c:when>

css button materialize

asked by anonymous 06.07.2016 / 16:19

2 answers

Adjust columns according to available JTable size Export Datatables

score 1 · Answer 1

For all text to fit within your button you need to change the height to auto , like this:

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

<style>

#botao {
    height: auto !important;
}

</style>


<c:when test="${p.parCodigoReg!=0}">
    <a href="impressaoBoleto.do?     codigoPar=${p.parCodigoReg}&parTipo=N&rel=boleto&portal=1" 
            target="blank" 
            class="waves-effect waves-light btn-large z-depth-4" id="botao">
  <i class="large material-icons left">cloud</i>
    Imprimir Boleto de Mensalidade ParcelasRegulares   
  </a>
  <span>
    Próximo Vencimento: ${p.parVencimento}
  </span>
</c:when>

score 0 · Answer 2

@Jonatas Almeida put the code in order to analyze.
You need to enter the Materialize classes to work. It would look something like this:

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
        <a class="waves-effect waves-light btn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper ex id hendrerit.</a>