Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Bootstrap Building the Form and Button Panel

Posted by manuelpenaloza
manuelpenaloza
Courses Plus Student 10,543 Points

why is the button placed in the input field?

regarding the phone input field: simply can't explain myself why the arrow button default places itself within the input field (as it's not nested etc.). I see that the arrow button has an absolute position to the input field, but why does it behave as child of the input field? Is a submit button always child of an input field? Thx for your answers!

4 Answers

David Negrete
David Negrete
19,909 Points

if you look at the index.html code you will see that the form that accepts the users input has a <span> that is closed before the final </button> tag. Where the span is you would normally see text. You make have seen submit or enter in some other html code. Here in this project the .glyphicon class is adding the icon. .glyphicon-arrow-right add the right facing icon from bootstap.

Mary Hawley
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mary Hawley
Front End Web Development Techdegree Graduate 34,349 Points
Mary Hawley
.a{fill-rule:evenodd;}techdegree seal-36
Mary Hawley
Front End Web Development Techdegree Graduate 34,349 Points

If you are using the project files from a previous video, the form is missing styles that place the icon in the input field. If the following styles are placed in my-styles.css, the arrow icon will be in the correct place. 

/* Form
================================= */

.phone-txt {
    padding: 24px 12px;
    width: 90%;
}
.btn-submit {
    color: inherit;
    font-size: 1.6em;
    background: transparent;
    position: absolute;
    right: 55px;
    bottom: 3px;
}
Gordon Cone
Gordon Cone
1,550 Points

Thanks Mary. This worked. Now it makes a little more sense why the arrow is displaying in the input sections. Looks like the css is positioning the btn and arrow.

manuelpenaloza
PLUS
manuelpenaloza
Courses Plus Student 10,543 Points
manuelpenaloza
manuelpenaloza
Courses Plus Student 10,543 Points

That's it, thx David Negrete!

Pavlo Kochubei
Pavlo Kochubei
15,009 Points
Pavlo Kochubei
Pavlo Kochubei
15,009 Points

Same question here, maybe my English is no good, but I can't understand David Negrete explanation. @manuelpenaloza have you had progress with this? Thanks.