Input Field exeeds device width


#1

When input is focused Border is added to input field it exceeds device width creating a bad style.

I have attached screenshot and codepen sample.

See the Pen nGuwm by Sudhindra Chausalkar (@Sudhindra_Chausalkar) on CodePen.


#2

Hi Sudhindra :smile:

Have you taken a look at Ionics grid implementation?

I’d suggest putting your label and input box in a div with class row and then the label and input box in divs of class col. In doing so, the sizing will be handled for you.

Something like this:

<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>

Good luck :smile:
Ed


#3

The same problem exists here on my device, and also for textarea.

Another related issue is that sometimes the view goes back with $ionicViewService.getBackView().go() in the controller, the blue border (togother with the text in it) remains on the view.


#4

Nice tip.
Is this a preferred way to arrange the labels and inputs? If so, maybe it should be mentioned in the ionic doc/manual.
Another problem is that in most time the width of label is fixed and I do not want it to occupy too much space of the view. How to achieve this with grid?
Thank you, @edwrede_ZA.


#5

Anytime zwz :smile:

If you have a look further down in the grid documentation you’ll see columns with specified width %s.

I usually make my input a col-75 which leaves 25% for the label. You can play around with this as you see fit obviously.

<div class="row">
  <div class="col">Put your label here</div>
  <div class="col col-75">Put your input here</div>
</div>  

Another option you have is to use a form, which is probably the “best practice”. I quite like the forms with a full width input where the label is a placeholder, I think it’s an elegant and modern approach, see an example here:

Good luck :smile:
Ed


#6

I will try both options.
Thanks :smile:


#7

My personal preference is for option 2 :slight_smile: check out all the options in the forms section of the documentation, some really nice stuff you can adapt for your own purposes!

Good luck :smile:

Ed


#8

Thanks @edwrede_ZA that worked.

… but new issue has risen if my labels are longer (than 25%) at that point either label overlaps with input field or hides under it and consistency changes from android to ios. If i change it to col-33 my form is just wasting a lot of space.

What actually i am looking for a way to make sure that despite label size ( labels are dynamic so don’t know its length ) my input box should just occupy the width of device neither exceeding width of device nor leaving space at right.

Up until now i have tried changing default ionic class input-label width (list example by ionic http://ionicframework.com/docs/components/#forms-inline-labels)


#9

Hey Sudhindra :smile:

Why not try the stacked approach?

That way your label and input can both be 100% width?

Or alternatively just use the placeholder as the label instead of a dedicated label?

Good luck :smile:

Ed


#10

Thanks.

This issue is just for a few labels will try to write css which will be applied globally for all forms.
thank you anyway.


#11

hahaha you are the best! xD