I have a Twitter Bootstrap list with badges, and I have also added a delete icon I currently have two problems:
The badge is automatically situated to the right of the list row, and I want the delete icon to be after and not before the badge (I think it would look better that way). I guess I'm going to need to redefine the badge style, but don't know how to do that.
The delete icon is not vertically aligned correctly, and I haven't found the way to fix it either.
HTML:
<div class="panel-body">
<ul id="mylist" class="list-group">
<li id="item1" href="#" class="list-group-item">Item1 <span id="badge" class="badge">5</span>
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>
</li>
<li id="item2" href="#" class="list-group-item">Item2 <span id="badge" class="badge">-10</span>
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>
</li>
</ul>
</div>
Here is a JSFiddle with a small example of my situation.
Any help?
The bootstrap elements like pull-right have the property as:
float : right
Under this property, the Document Object Model is reversed. Like:
<span>First</span><i>Second</i>
would be displayed as: (Note Only Displayed as - DOM is still same.)
<i>Second</i><span>First</span>
Ans your Solution is JSFiddle is: http://jsfiddle.net/r77wkzcg/5/ (Updated)
In right Alignment, the point of connection is right. So, the first element in the DOM gets the priority to attach to the right. Explained here: http://jsfiddle.net/tpahadi/rrrr3wq3/1/
For your items use:
<li id="item1" href="#" class="list-group-item">Item1
<div class="pull-right">
<span id="badge" class="badge" style="float:left;">5</span>
<i class="fa fa-remove fa-2x" style="color: red;"></i>
</div>
</li>
Just put the icon after the badge, it depends of html elements order :
<li id="item1" href="#" class="list-group-item">
Item1
<span id="badge" class="badge">5</span> <!-- first -->
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i> <!-- second -->
</li>
And for the vertical centering of the delete icon, you can shift top the icon with a negative margin top (it's not clean but it work, just use a precise selector to avoid overriding all bootstrap elements)
See this fiddle
Put the fa-remove icon span first..
<div class="panel-body">
<ul id="mylist" class="list-group">
<li id="item1" href="#" class="list-group-item">
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item1 <span id="badge" class="badge">5</span>
</li>
<li id="item2" href="#" class="list-group-item">
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item2 <span id="badge" class="badge">-10</span>
</li>
</ul>
</div>
http://bootply.com/8wySK2DPfw
Related
Why is the background color where the cart is different on the iphone screen? How to solve ?
<ul class="navbar-nav ml-auto d-block d-md-none">
<li class="nav-item">
<a class="btn btn-link" type="button" data-toggle="modal" data-target="#exampleModalCenter">
<i class="fas fa-shopping-cart" style="color: #fff;"></i>
<span class="badge badge-dark">0</span>
</a>
</li>
</ul>
Try changing the background of the Button to something that matches.
<i class="fas fa-shopping-cart" style="color: #fff, background="######"></i>
You could look into IOS Color Schemes, You will find the colors there.
<div class="item slides">
<div class="slide-12"></div>
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"></a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"></a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"></a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"></a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"></a>
</div>
</div>
The hyperlinks in the above code snippet are not clickable. It could be a problem of another overlapping div. The links work when I use tab.
I tried z-index in different combinations, but none of them seem to work!
Find the complete html and css file in the following links:
CSS
HTML
Any help appreciated.
I added some text inside the anchor tags. But it seems you are needing to show them just as Font Awesome icons. In that case a single space character will be enough. Or well a
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"> sowmiya-nagarajan</a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"> strangest-quark</a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"> strangely-quark</a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"> </a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"> </a>
</div>
The links have no content inside them. What you can do if you want icon only links is to put the fa-* classes on a span or i tag inside the a tag like so:
<a href="https://example.com" >
<span class="fa fa-linkedin"></span>
</a>
This then causes the a tag to actually have content and be clickable.
I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}
Basically what happens is when I load my page and then drop down either my outer collapsible menu (the .admin) or the nested collapsible menu (.unitsofstudy), it does not update the glyphicon I have set using the :after selector unless I toggle it twice.
Would anyone be able to take a look and see if they can spot where I have screwed this up; I have been at this for a few hours now trying to fix but with no success. If any more info is needed let me know.
HTML:
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu" id="navmenu-sidebar">
<!-- Admin dropdown -->
<li>
<a class="admin" data-toggle="collapse" href="#admin"><i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin</a>
<ul id="admin" class="nav collapse">
<li>
<a class="unitsofstudy" data-toggle="collapse" href="#unitsofstudy"> <i class="fa fa-book" style="margin-right: 12px;"></i>Units of Study</a>
<ul id="unitsofstudy" class="nav collapse">
<li>
<i class="fa fa-book" style="margin-right: 8px;"></i> View Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Create Unit Offerings
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Semesters
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
My CSS:
.admin:after, .unitsofstudy:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.admin.collapsed:after, .unitsofstudy.collapsed:after {
content: "\e080";
}
You need to give your anchors an initial class of .collapsed
<li>
<a class="admin collapsed" data-toggle="collapse" href="#admin">
<i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin
</a>
</li>
So class both admin and unitsofstudy to let bootstrap know the initial state of the menu is collapsed
Working example
http://codepen.io/jcoulterdesign/pen/6443069430f54e0b635e726c2cb9da02
I'm a bit stumped with a problem with the bootstrap.ui module for AngularJS.
This is my HTML:
<nav id="sidebar">
<ul id="main-nav" class="open-active">
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/vernerunde">
<i class="fa fa-th-list"></i>
Ny Vernerunde
</a>
</li>
<li>
<a href="#/interaksjon">
<i class="fa fa-gears"></i>
Ny Interaksjon
</a>
</li>
<li>
<a href="#/brukerstyring">
<i class="fa fa-user"></i>
Brukerstyring
</a>
</li>
</ul>
</li>
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-search"></i>
Lister
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/list">
<i class="fa fa-desktop"></i>
Alle
</a>
</li>
</ul>
</li>
</ul>
</nav>
And this is the controller responsible for the isCollapsed model:
controllers.controller('CollapseCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I've also made a small gif which I'm going to throw in that shows my actual problem. Now, I'm not too sure whether or not it's present in the gif, but it seems if I click the first element in the list, it works. Then when that first element has been toggled, and I click the element underneath, it totally breaks apart.
EDIT1:
Okay, I changed the directive from ng-show="" to collapse="", still using "isCollapsed". Now it's working, but the height of the box that's collapsed is too small.
Though I don't have much insight into the problem I strongly suspect that the issue is in here:
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
Mind that the ng-click is executed once , but once a variable changes, the scope lifecycle will recalculate the scope several times. And once a variable which depends on isCollapsed will change, the scope is re-calculated again, and so forth. This might explain the unusual openings and closings of the title panes. Although I don't see exactly why isCollapse is recalculated.
Solution: Move it as a method inside the controller.