Vue-material: Sizes (md-input-container)

[juppdes]

@marcosmoura I'm not managing to scale the size of the input fields and others. How do I do ?

[marcosmoura]

@juppdes Sorry, but I didn't get it. What do you need? To scale it horizontally to get a full size? Or do you want to increase the size of the font and based on that the container and the input itself would grow?

Like that?

[juppdes]

Yes, horizontally resize the input size. Like size of 'Price', 'Location'.

[marcosmoura]

Well. Right now, as you can see on #35, Vue Material doesn't have a Grid System implemented. Yet. You will need to do it by hand or plug in a grid system library. I would recommend those two (for now):
http://kenwheeler.github.io/structure/
http://flexboxgrid.com/

If you want to implement something by hand you can use this approach:

.row {
  margin: 0 -8px;
  display: flex;
  flex-flow: row wrap;
}

.column {
  padding: 0 8px;
  flex: 1 0 auto;
}

.column-20 {
  min-width: 20%;
  flex: 1 0 20%;
}

.column-25 {
  min-width: 25%;
  flex: 1 0 25%;
}

.column-33 {
  min-width: 33%;
  flex: 1 0 33%;
}

.column-50 {
  min-width: 50%;
  flex: 1 0 50%;
}

.column-66 {
  min-width: 66%;
  flex: 1 0 66%;
}

.column-75 {
  min-width: 75%;
  flex: 1 0 75%;
}

.column-100 {
  min-width: 100%;
  flex: 1 0 100%;
}

<div class="row">
  <div class="column column-33">

  </div>

  <div class="column column-66">

  </div>
</div>

This is not fully responsive but is at least flexible enough to fix well in any screen. You can vary the size of the columns changing for one of the given sizes on the css part.
If this do not work for you let me know and I will give another temporary solution while grid system is under construction.

Thank you and sorry for only giving to you the temporary solution now.

[juppdes]

Thank you for help friend!

[ghost]

@marcosmoura How did you scale the input? I was trying quiet a few methods but it didn't work.

[don41382]

@marcosmoura

I have the same problem as @fleumari. How did you increase the font-size of the input-field, like you displayed in your screenshot (Vintage 50)