[Solved] Extended text input illusion

[ErikAGriffin]

Hi, I am having trouble achieving what I want here. I have tried a couple of solutions that almost get it, but there’s always a little querk that makes it not quite right.

So my goal, visually, is for this input bar to be centered and takes up 80% of its container. Except that on its right, there is a button where the text input ends and a button to clear the text box appears. The button will appear to be as ‘on top of’ the text box but the text input will end just before, and when the page is scaled the button will maintain (approximately) a fixed width while the whole element scales.

Here is a code-pen starting point I’ve been using.

The colors are funky just to see the different elements, but in the finished product the input and .fake-bar element will both be white on a block background.

http://codepen.io/ErikAGriffin/pen/vNERQX

[ErikAGriffin]

Hmm my thoughts.

• Well I’m using Angular to ng-click, I guess it’s semantics but I could use `<button ng-click>` instead of `<a ng-click>`.
• This isn’t necessary but I’d prefer that the hitbox be only the space of the image and not the entire ‘blue’ area.
• I don’t want the image to change size, and so it becomes necessary to put a minimum width. But, you are right, this causes overflow issues.
• Furthermore the goal is for the entire set of objects to appear centered, by absolutely positioning the button at 100% left the set of objects appears offset to the right

EDIT: Here is what I came up with. Funny its seems to be working now.. but if I recall when I implemented it in my actual site for some reason the text input was acting as if it had maximum with, and stopping after the page expanded past a certain width.

http://codepen.io/ErikAGriffin/pen/NGPzWQ

EDIT 2: Huh, just implemented in actual code and seems to be working fine. In fact instead of setting the button’s width to 0%, I was able to set it to a fixed width of 35px and it is working beautifully

[Author]

Posts