How to place the TextField's divider under the LeftView as well by using Cosmicmind/Material TextField

Question

I am using TextField by using Material Library. That's what the default implementation(Divider is under the Text Area only).

Is there any way to put the divider under the LeftView/Image and decrease the gap between Image and Text (like this).

Any help will be appreciated.

i don't have hands of experience on material library.. my suggestion is go with your own custom textfield — Gokul G, Jun 26 '17 at 08:56
Let's see if I get any quick workaround with Material or else I will make my own custom textfield. — Soumen, Jun 26 '17 at 09:35

score 1 · Answer 1 · answered Oct 10 '17 at 12:09

1

this could be the solution for your problem.....

let leftView = UIImageView()
leftView.image = Icon.phone?.tint(with: Color.blue.base)

textField.leftView = leftView
textField.leftViewMode = .always

answered Oct 10 '17 at 12:09

Najam

1,129
11
32

No. These four lines of code produce the behavior, which `Soumen` wants to avoid. The `flavs's` solution resolves the problem. – Roman Romanenko Dec 16 '18 at 17:22

score 1 · Answer 2 · edited Nov 08 '18 at 01:41

1

When the leftView is laid out it sets the divider's edge inset equal to it's (the leftView) width. So you're going to need to change that. I am subclassing TextField, so I just overrode layoutSubviews.

override func layoutSubviews() {
    super.layoutSubviews()
    dividerContentEdgeInsets.left = 0
}

edited Nov 08 '18 at 01:41

Stephen Rauch

47,830
31
106
135

answered Nov 08 '18 at 01:21

flavs

11
1
2

How to place the TextField's divider under the LeftView as well by using Cosmicmind/Material TextField

2 Answers2