Twitter Bootstrap Question posted in

Twitter bootstrap – Unexpected underline css artifact in chrome

Once the first drop-down in this navigation menu gets clicked, it will be underlined as expected, once the menu loses focus (i.e. clicking somewhere else on the page), the underline at the end of the tag is not removed.

It’s happening in only in Chrome (Version 45.0.2454.85 m)

I expect the the underline at the end to be completely removed.

Possible cause is that font-awesome is causing some issues with chrome.

image for clarification:

underline incorrect

Fiddle

/* ========================================================================
 * Bootstrap: dropdown.js v3.3.5
 * http://getbootstrap.com/javascript/#dropdowns
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+ function($) {
  'use strict';

  // DROPDOWN CLASS DEFINITION
  // =========================

  var backdrop = '.dropdown-backdrop'
  var toggle = '[data-toggle="dropdown"]'
  var Dropdown = function(element) {
    $(element).on('click.bs.dropdown', this.toggle)
  }

  Dropdown.VERSION = '3.3.5'

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^s]*$)/, '') // strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }

  function clearMenus(e) {
    if (e && e.which === 3) return
    $(backdrop).remove()
    $(toggle).each(function() {
      var $this = $(this)
      var $parent = getParent($this)
      var relatedTarget = {
        relatedTarget: this
      }

      if (!$parent.hasClass('open')) return

      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return

      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this.attr('aria-expanded', 'false')
      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
    })
  }

  Dropdown.prototype.toggle = function(e) {
    var $this = $(this)

    if ($this.is('.disabled, :disabled')) return

    var $parent = getParent($this)
    var isActive = $parent.hasClass('open')

    clearMenus()

    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $(document.createElement('div'))
          .addClass('dropdown-backdrop')
          .insertAfter($(this))
          .on('click', clearMenus)
      }

      var relatedTarget = {
        relatedTarget: this
      }
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this
        .trigger('focus')
        .attr('aria-expanded', 'true')

      $parent
        .toggleClass('open')
        .trigger($.Event('shown.bs.dropdown', relatedTarget))
    }

    return false
  }

  Dropdown.prototype.keydown = function(e) {
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return

    var $this = $(this)

    e.preventDefault()
    e.stopPropagation()

    if ($this.is('.disabled, :disabled')) return

    var $parent = getParent($this)
    var isActive = $parent.hasClass('open')

    if (!isActive && e.which != 27 || isActive && e.which == 27) {
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      return $this.trigger('click')
    }

    var desc = ' li:not(.disabled):visible a'
    var $items = $parent.find('.dropdown-menu' + desc)

    if (!$items.length) return

    var index = $items.index(e.target)

    if (e.which == 38 && index > 0) index-- // up
      if (e.which == 40 && index < $items.length - 1) index++ // down
        if (!~index) index = 0

    $items.eq(index).trigger('focus')
  }


  // DROPDOWN PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function() {
      var $this = $(this)
      var data = $this.data('bs.dropdown')

      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.dropdown

  $.fn.dropdown = Plugin
  $.fn.dropdown.Constructor = Dropdown


  // DROPDOWN NO CONFLICT
  // ====================

  $.fn.dropdown.noConflict = function() {
    $.fn.dropdown = old
    return this
  }


  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
      e.stopPropagation()
    })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

}(jQuery);
/*css */

.navigation ul {
  margin: 9px;
  padding: 0;
}
.navigation ul li {
  padding: 0 16px;
  display: inline;
}
.navigation ul ul li a {
  padding: 8px;
}
.navigation ul ul li {
  padding: 0;
}
.navigation ul li a i {
  display: inline
}
/*bootstrap stuff*/

a:hover {
  color: #2a6496;
  text-decoration: underline;
}
a {
  color: #428bca;
  text-decoration: none;
}
.dropdown {
  position: relative;
}
.dropdown-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap;
}
.open>.dropdown-menu {
  display: block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*font-awesome*/

@font-face{

font-family:FontAwesome;
 src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0) format('eot'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0) format('woff'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0) format('truetype'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format('svg');
 font-weight:400;
font-style:normal;

}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa-angle-down:before {
  content: "f107";
}
.fa-home:before {
  content: "f015";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <li>
      <a class="active"><i class="fa fa-home"></i>&nbsp;&nbsp;Home</a> 
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                with whitespace 
                <i class="fa fa-angle-down"></i>
             </a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                       has artifact
                  </a> 
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">
                without whitespace <i class="fa fa-angle-down"></i></a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                      does not have artifact
                  </a> 
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                with whitespace 
                <i class="fa fa-angle-down"></i>
                and some text    
             </a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                       it seems it only happens when ending on a font-awsome icon.
                  </a> 
        </li>
      </ul>
    </li>
    <li>
      <a>
                last item               
             </a> 
    </li>
  </ul>
</div>

How would i go about and fix this?
preferably using css, leaving the html intact. Both the text and the arrow should be underlined

-edit:
some Answers/comments point out that removing the white-space will fix this issue.
I would also like to understand why the white-space is still underlined after losing hover/focus.

Tags:

2

Answers


  1. 0

    Remove the unnecessary ‘whitespace’ just before the closing </a> tag –

    <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Account <i class="fa fa-angle-down"></i>            </a>

    Change above like this –

    <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Account <i class="fa fa-angle-down"></i></a>
    Login or Signup to reply.
  2. 0

    I understand your problem. Write below code out of the anchor tag (<a></a>)

    <i class="fa fa-angle-down"></i>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search