I have a multi step form that is using UI-router. I'm wondering how i can bold the active links and keep it bolded. right now the links only get bolded when i click on them and go back to its original css when i click out of it.
html:
<div class="text-center">
<a ui-sref-active="active" ui-sref=".info"><span>1</span> Personal Info</a>
<a ui-sref-active="active" ui-sref=".events"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".submit"><span>3</span> Kewl Dawg</a>
</div>
css:
a:active {
font-weight: bold;
}
here is a link to the plunkr:
https://embed.plnkr.co/PSpH6qdlm9JltgU2DAbj/
Solved:
just removed a: from the css....
ui-sref-active adds a class, your css targets the ':active' pseudoclass. use a.active in your css.
https://plnkr.co/edit/FcHpaV5ITXYqXLs0FwZL?p=preview
Related
white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.
Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.
Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?
Source:
<div class="text-center">
<!-- FB -->
<a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555">
<i id="facebook" class="fa-3x fa fa-facebook-square"></i>
</a>
<!-- Twitter -->
<a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+#SolidTranslate" target="_blank" style="color : #555">
<i id="twitter" class="fa-3x fa fa-twitter-square"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
0here:%20${shareURL}&source=${shareURL}"
target="_blank" style="color : #555">
<i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555">
<i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
</a>
</div>
Those lines usually come from the default (underline) a element style.
Either use another element or remove the underline :
a.social { /* or whatever your class */
text-decoration: none;
}
"text-decoration: none;" needs to be set with the ":hover" selector on the "a" tag, like this...
a:hover {
text-decoration: none;
}
Fontawesome great and fun. But if you are using it as font, this is expected behaviour.
Add text-decoration to every state.
If you don't add :link it will show purple underline, very hard to see but it is there.
If you don't add :active it will show red underline when clicking, very visible.
a:hover, a:focus, a:active, a:visited, a:link{
text-decoration: none;
}
Remove text-decoration for hover effect on all fa class objects:
.fa:hover {
text-decoration: none;
}
Assuming you are using a tags
text-decoration: none;
It may also be necessary to use the important keyword in your class definition
text-decoration: none !important;
Well, I had the exact same problem, and it turned out that what was causing mine was a background change on hover effect I had set to my container. I just had to change the selector to a class selector and everything was fixed!
(How) Can I place a link within a twitter bootstrap "list-group-item" that is itself a link without messing up the list-group-item format? (see below)
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http" target="_blank">
Share on Facebook
</a>
</a>
</div>
You can't use <a> tags inside other <a> tags, that's invalid HTML. Check this question.
You can make it clickable with jQuery though, with an hack like this:
HTML - use a div instead with a custom class and some data-tags:
<div class="list-group">
<div class="list-group-item active list-group-item-linkable"
data-link="http://www.google.com">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http"
target="_blank">
Share on Facebook
</a>
</div>
</div>
CSS - make it seem like a link:
.list-group-item-linkable:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
cursor: pointer;
}
JS - the fun part:
$(document).ready(function() {
$('.list-group-item-linkable').on('click', function() {
// same window/tab:
window.location.href = $(this).data('link');
// new window/tab:
//window.open($(this).data('link'));
});
$('.list-group-item-linkable a, .list-group-item-linkable button')
.on('click', function(e) {
e.stopPropagation();
});
});
I've also created a JSFiddle.
I am confused, you want the entire thing to be a link? It may take a couple more steps - nothing a little copy-and-pasting cant handle - but why not just manually provide an 'a' tag to each of the children of the "list-group"
Consider the following jQuery Mobile markup:
<div data-role="collapsible">
<h3 style="white-space:normal">This heading is not
wrapping even after "white-space:normal" style is applied</h3>
<p>This content is wrapping without any problems</p>
</div>
The heading should wrap due to the style "white-space:normal", but it is not happening.
Why this is so?
What can I do to wrap the heading?
As of version 1.4.3, you now need to do something like this in your CSS:
h3 .ui-btn{white-space:normal !important;}
I had this issue, and it was driving me crazy because all the examples online were for older versions of jQuery Mobile, and apparently the good people at jQuery Mobile changed up their class names over time.
...............................................................
Used to this
word-break:break-all
as like this
h3{
word-break:break-all;
}
The actual text of the h3, after jquerymobile had its ways, is not directly inside the h3 tag. The answer is to use the css on the class ui-btn-text. So if you want to implement it for buttons made from h3 tags:
<style>
h3 .ui-btn-text{ white-space:normal; word-break:break-all; }
</style>
The h3 tag's html after jquerymobile had loaded looks something like this:
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" ...>
<span class="ui-btn-inner">
<span class="ui-btn-text">The actual h3 text
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>
</span>
</a>
</h3>
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
† According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login