Text wrapping on form labels

ionic-v1
1

Hello everybody and thanks to the creators, for this beautiful framework!

This probably is a silly question, but couldn’t find no solution reading the manuals or searching by myself:

I’m developing a simple application in which the user has to fill a form with many questions regarding the state of a facility or mechanical device. Summing up, many of the questions are quite long, and the label of the form (stacked, floating… whatever) won’t fit them inside a tablet device screen width. I tried using item-text-wrap but the result is awful, cramming all the text to the left and not homogeneously spreading it as it happens inside a panel or list.

I have made no changes to the original css, I’ve just started to use the framework.

There’s an example of the kind of questions I’m facing. Try adding item-text-wrap to the form, label or even span elements and you’ll see what I’m talking about.

            <form class="list">
              <label class="item item-input item-stacked-label">
                <span class="input-label">3.4.- Esta se encuentra bajo tubo, canalización prefabricada o con conductores aislados con cubierta metálica.</span>
                <input type="text" placeholder="John">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Last Name</span>
                <input type="text" placeholder="Suhr">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="john@suhr.com">
              </label>
            </form>

Is there any solution for this?

Thanks in advance,
Pedro.

2

No ideas? I’ve just read one more place in which this is mentioned, but no answer was provided:

on bennlich comment.

I know it’s nobody’s problem but mine, bit it’s quite a bummer, as it renders the framework useless for my current use case: I can’t afford the questions not to be seen by technicians, and manually introducing <br> is awfully ugly and not consistent among devices or orientations.

3

This might be way to late,… but in case somebody struggles with this here is my solution:

.input-label {
   white-space: normal !important;
   max-width: none !important;
   width: 100%;
}
8 Likes
4

Thank you very much!! Your answer saved me!!