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

Posted by Elijah Collins
Elijah Collins
19,457 Points

Button outside of txt field

<!-- Panel -->
      <div class="panel panel-default hidden-xs">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-1">
            <form>
              <p><strong>Enter your number and we'll text you a link</strong></p>
              <label class="sr-only">Phone Number</label>
              <input class="form-control phone-txt" type="text" placeholder="Phone Number">
              <button class="btn btn-submit" type="submit">
                <span class="glyphicon glyphicon-arrow-right"></span>
              </button>
            </form>
          </div>
          <div class="col-sm-5">
            <p><strong>Or visit an app store to download now!</strong></p>
            <a class="btn btn-default btn-lg" href="#">iOS</a>
            <a class="btn btn-default btn-lg" href="#">Android</a>
          </div>
        </div>
      </div><!-- End panel -->
Elijah Collins
Elijah Collins
19,457 Points

I've done side by side comparisons on Building the Form and Button Panel stage 3 of Framework Basics, and I cannot figure out why my submit button is outside the text form?

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Elijah,

I see a few buttons here, which one are you having issues with?

The first?

    <button class="btn btn-submit" type="submit">
       <span class="glyphicon glyphicon-arrow-right"></span>
     </button>
   </form>
 </div>

Or is it one of these?

    <div class="col-sm-5">
      <p><strong>Or visit an app store to download now!</strong></p>
         <a class="btn btn-default btn-lg" href="#">iOS</a>
         <a class="btn btn-default btn-lg" href="#">Android</a>
      </div>
  </div>

I'm not sure how the stage works that your on, but the btn-default is outside of the form completely, maybe thats causing your issue.
Could you paste what the challenge is asking into a post so we can get a better idea please.

Thanks

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

The button in the form w/ the span element inside

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Elijah,

Are you supposed to have a section in there somewhere, that might explain things.
Can you paste the challenge question.

<section>

</section>
Elijah Collins
Elijah Collins
19,457 Points

its apart of a video not a challenge question

http://teamtreehouse.com/library/framework-basics/build-a-website-with-bootstrap/building-the-form-and-button-panel

Elijah Collins
Elijah Collins
19,457 Points

I'm at a loss I have the form, and a input "text area", all I'm trying to do is have a submit button inside of the "text area"

Wayne Priestley
Wayne Priestley
19,579 Points

Im just going through the video now Elijah, maybe two heads can get this sorted.

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Elijah,

I watched that twice now, i can't see any difference between your code and Guils,
Can you post your css, thats the only thing i can think of now.

Elijah Collins
Elijah Collins
19,457 Points

Yes that was it, I was so focused on the html I forgot to check the css, but he never mentioned that he added some new css rules.

Wayne Priestley
Wayne Priestley
19,579 Points

Elijah,

Have you tried looking at it using a different browser?

Wayne Priestley
Wayne Priestley
19,579 Points

Great, Im glad your sorted mate.

Good luck with the rest of the course, its bad when your stuck, but its nice when you find and fix it.

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

Here are the new rules

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

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