Freecodecamp: Cannot get inside of the existing button tag element with cursor

Created on 14 Dec 2015  Â·  13Comments  Â·  Source: freeCodeCamp/freeCodeCamp

Hi, I an unable to insert the cursor into the button element to continue with this lesson. I cleared the browsers cache (Chrome) and came back and am still unable to insert my cursor.

Challenge Waypoint: Style Text Inputs as Form Controls has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
    </div>
  </div>
  <img src="http://bit.ly/fcc-running-cats" class="img-responsive">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Most helpful comment

You know what seemed to work (same problem in Chrome, El Capitan), was deleting a few blank lines from the top.

All 13 comments

What do you mean by "Can't Get Inside" - you mean you can't place the cursor in? What happens when you click? Can you use the arrow keys on your keyboard to move the cursor around? Can you select/delete the button and re-type it?

This code: <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button> looks correct. How were you able to create that?

Hi Rex,

So, while at school on an enterprise version of Windows 7, I got to a point
in the subject lesson where I could not insert the cursor into the button
tag. Up to that lesson, I could insert the cursor thorough out the code
editor. I cleared the browser cache, rebooted the system but still was not
able to click into certain areas. And, no, it was really weird as the
cursor would jump to the end of the editor if I tried arrow keys. I was
able to progress through the lessons until I got to this particular one and
then all weirdness broke out!

However, the IT tech had done some updating earlier in the morning and I am
not sure if this is causing issues. I was getting Windows error messages so
I left a note for the tech and will have to wait until tomorrow to see if
he was able to take care of the OS issues. Then I'll see if I can repeat
the issue in the editor. I am able to continue with the lessons on my home
system. Thank you for getting back to me.

Warmest Wishes,

Charley Blewett

On Mon, Dec 14, 2015 at 1:48 PM, Rex Schrader [email protected]
wrote:

What do you mean by "Can't Get Inside" - you mean you can't place the
cursor in? What happens when you click? Can you use the arrow keys on your
keyboard to move the cursor around? Can you select/delete the button and
re-type it?

This code: looks correct. How were you able to
create that?

—
Reply to this email directly or view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/5293#issuecomment-164569915
.

I'm going to close this as a user/configuration specific issue. If you find that you are able to reproduce across multiple systems/platforms, then let us know.

What was not clear to me is why you couldn't navigate the cursor using the arrow keys.

Possible solution:
I was having the same issue with this lesson. I could not get my cursor to go beyond line 68 in the code and needed to work on line 70. I tried in both Safari and Chrome with arrow keys and clicking on line 70 and the cursor would not go there. My system runs El Capitan for the OS. While in Chrome I put my cursor as far as it would go (Start of line 69) and hit the delete button. Now I am able to get my cursor into the line 70.

I'mhaving this same exact issue right now. I can't click into the text below line 68. I can't insert my code accomplish one of the goal's exercises.

You know what seemed to work (same problem in Chrome, El Capitan), was deleting a few blank lines from the top.

I just use Internet Explorer anytime I can't click into a line. So far it was only those few challenges for me in Boostrap.

Using Chrome and also not possible to edit below line 68 (on exercise _Style Text Inputs as Form Controls_). Deleting lines from the top is the way to by-pass the problem.
On other exercises, I have removed the indentation in some of the lines and then I was able to add as many lines as I wanted.

I was having the same issue, using Chrome. I could not get my cursor to the end of line 69 as 'acoombs12' suggested, so I ended up deleting the

on line 73 and retyping it, and after that I was able to modify line 69

I figured out how to fix this issue. Look at the very top of your code editor, and if the first line is space down then all you have to do is bring that line to the very top. The problem should be fixed after that. Refer to the images attached.

@Ambition101, this challenge don't have an issue anymore. it supposes to be fine. plus this issue is very old.

@texas2010 Thank you for your kind message. Please excuse my helpful comment as I'm new to the community.

@Ambition101 no problem.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Broken wiki link in "Wherefore art thou"
jurijuri picture jurijuri  Â·  3Comments

Using Objects for Lookups
robwelan picture robwelan  Â·  3Comments

Change Font Size issue
DaphnisM picture DaphnisM  Â·  3Comments

Improve UX for sent emails
raisedadead picture raisedadead  Â·  3Comments

Test cases are returning the correct value in the console, but it won't let me pass the challenge
EthanDavis picture EthanDavis  Â·  3Comments