How to add browse button to glyphicon-picture in bootstrap - html

In my page I have a text area and it has glyphicon-picture's button and glyphicon-video's button, now I need to add browse button to these buttons, how can I do this?
Edit:
<table cellpadding="5px" cellspacing="5px" style="margin: auto; margin-top: 10px">
<tr>
<td class="design"><span class="glyphicon glyphicon-pencil" style="font-size: 18px;"></span></td>
<td class="design"><span class="glyphicon glyphicon-picture design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-facetime-video design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-link design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-calendar design-icon"></span></td>
</tr>
</table>
now I just have this and I want to add browse button to glyphicon-picture and I dont know how do this.

You can add glyphicon image to a button ..Try the following code.Hope it helps
<button class="btn btn-success"><i class="icon-white icon-ok"></i>Elham Gdz</button>

Related

Serialized Dropdown Lists

I am struggling with the task of serializing dropdown lists. I am building an app that lets you order items and than you can view the orders. So each order has a list of items assigned to it. I am using AngularJS 1.6.9. This is the html page :
<div ng-app="ShowOrdersApp" ng-controller="mainCtrl" class="container">
<br><br>
<button ng-click="getOrders()"> Show Orders </button>
<br><br>
<table>
<tr>
<th > Orders </th>
</tr>
<tr ng-repeat="x in orderlist">
<td><label> No. {{x.id}} </label><br>
<label> Date and Time : {{x.timestamp}} </label><br>
<button class="btn btn-primary dropdown-toggle" ng-click="getOrderDetails(x.id)"> List of Items
<span class="caret"></span></button><br>
</td>
</tr>
</table>
</div>
On clicking the blue button I want it to show all the items assigned to particular order, but I have trouble creating the dropdown since number of orders may vary and number of items for each order may vary as well. How do I make it work ?
So, do i understood correctly - you want to show items from List of items in dropdown?
Try with this :
HTML:
<table>
<tr>
<th > Orders </th>
</tr>
<tr ng-repeat="x in data">
<td><label> No. {{x.id}} </label><br>
<label> Date and Time : {{x.date}} </label><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="getOrderDetails(x.id)"> List of Items
<span class="caret"></span></button><br>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" ng-repeat="item in x">
<a class="dropdown-item" style="display: block" ng-repeat="y in item">{{y.name}}</a>
</div></div>
</td>
</tr>
</table>
plunker: http://plnkr.co/edit/LZ8TF0MumSGPOXqFAkLm?p=preview

Unwanted stretched text within Span element HTML

I am trying to display a message within a span like below
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>`
This span has no text by default but will be populated with error text depending on what error occurs.
The problem is that the text appears stretched within the element and it looks bad. I am not sure what way to approach this. Any advice would be appreciated.
EDIT: The problem only occurs when I add the "glyphicon" class.
I am populating using JS like:
var msg = document.getElementById("ErrorMessage");
msg.innerHTML = "There has been an error";`
I have no custom CSS styles involved here.
<div role="main">
<span id="maincontent"/>
<div class="container">
<div class="jumbotron">
<div style="height: 50px; float: center;">
<h3>List Herd Numbers in Commonage</h3>
</div>
<form role="form" id="HerdForm">
<div class="form-inline">
<label class="control-label" for="commonage_id">Enter Commonage ID:</label>
<input id="commonage_id" type="text" class="form-control" autofocus="autofocus"
placeholder="Enter ID here " />
<button id="submitButton" type="submit" class="btn btn-primary">View</button>
</div>
</form>
</div>
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger"
id="ErrorMessage" style="display: none;" aria-hidden="true"></span>
<div id="loader" class="loader" hidden></div>
<div id="result_table" hidden>
<table class="table table-striped" id="herdTable">
<thead>
<tr>
<th class="threeTH">Herd Number</th>
<th class="threeTH">Share</th>
<th class="threeTH">Active Farmer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
A glyphicon does not expect to have other content than the icon itself. The problem is that the glyphicon class has more styles attached to it, which are unwanted for normal text. In this case, the font family!
Solution is to put the glyphicon itself in a span of its own, inside the ErrorMessage span.
span[aria-hidden='true'] {display:none}
a:active + span[aria-hidden='true'] {display:block}
a:active + span[aria-hidden='true']::after {content:'There has been an error.';}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<a>Press here to show text</a>
<span class="alert alert-danger" id="ErrorMessage" aria-hidden="true">
<span class="glyphicon glyphicon-exclamation-sign"></span>
</span>
You can use the glyphicon icon in separate span tag like this:
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

How to show and hide buttons with bootstrap and angularjs?

I have a table which contains some data and some buttons which changes according to response and user.
Here's the table.
<div class="form-group">
<div class="col-lg-12 col-md-9">
<table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100">
<thead style="text-align:center">
<tr>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created / Joined</th>
<th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th>
</tr>
</thead>
<tbody style="text-align:match-parent">
<tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)">
<td style="text-align:center">{{data.Employee.Empid}}</td>
<td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td>
<td style="text-align:center">{{data.Employee.Email}}</td>
<td style="text-align:center">{{data.Department.DeptName}}</td>
<td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td>
<td style="text-align:center; width:100px">
<div>
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button>
<!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>-->
<button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button>
<button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button>
</div>
</td>
</tr>
</tbody>
</table>
<p ng-show="details.length == 0">No Users found.</p>
<div class="col-md-8 col-xs-12">
<uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>
</div>
What I need to get done is that when the response comes from the JSON data the buttons have to change. Now according to this;
Generate button should show whendata.UserLogin.Status == ''(empty)
Pending button should show when data.UserLogin.Status == 'pending'
Retry button should show when data.UserLogin.Status == 'pending'
How do I achieve this. Help woud be appreciated.
You can use ng-show ng-hide or ng-if like below,
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
or
<button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button>
or
<button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>
You should go for ng-if instead of ng-show or ng-hide. Because in case of ng-show or ng-hide based on the flag the content is loaded in the DOM. so if u try to change the value of flag by using web developer of browser u can be able to see the actual content. But if u go for ng-if, the content is loaded at runtime only when the condition is true. so whenever u want a quicker performance you can go for ng-show or ng-hide but if we want runtime behavior u should use ng-if.
You can write code as below..
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button>
We can use ng-if,ng-show,ng-hide like
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button> <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button>
use ng-if ,it is efficient
Use below code in the success function of the API. This code will run after you get the response and the DOM is created.
$scope.$evalAsync(function(){
$timeout(function() {
// Here set the scope variable and it will work in ng-show
}, 0); // wait...
});
Note: Do not forget to add $timeout in the controller.

Make 2 buttons inside a table cell be next to each other

I have the following code :
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
</button>
</td>
They appear on 2 different lines.
How can I make them appear next to each other on the same line ?
I tried a few things with float and display but without success.
If I add that code in a snippet the buttons are next to each other, so it's hard to reproduce:
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>Button1
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>Button2
</button>
</td>
</tr>
</table>
The buttons are already displayed as inline-block.
Maybe the table isn't wide enough; if so, You could try <td style='white-space: nowrap'>.
If you're using Bootstrap, try using classes like "pull-left". This will float both of the buttons left and bring them inline. Also check to be sure nothing is overriding the current display attribute.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
Did you tried display: inline-block;?
However that seems unnecessary because two buttons in the same table cell will appear on the same line.
table,
td,
tr {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>
<button>Button1</button>
<button>Button2</button>
</td>
</tr>
</table>
What you need is just css display inline code, which can be use to format your button
form {
display: inline;
}
this displays an element as an inline element like span
Please see how to use <table> tag inside in <td> and get all button in line.
<table>
<td>
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs">Add</button>
</td>
<td>
<button class="btn btn-primary btn-xs">Edit</button>
</td>
<td>
<button class="btn btn-primary btn-xs">View</button>
</td>
</tr>
</table>
</td>
</table>

Alignment of span elements as td in table

How to make the span elements to be in a ordered manner as in table column ?
i.e how to make step, glyphicons and X to be aligned same as in table
(eg:glyphicons are moved up if we use span)
Html
<div class="row moving">
<div class="col-md-12">
<span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span>
<span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1"><h4>Step</h4></td>
<td class="col-md-8"><textarea class="form-control"></textarea></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></td>
<td class="col-md-1"><span>X</span></td>
</tr>
</table>
CSS
.moving{
margin-top:10px;
}
textarea{
resize:none;
}
Here is a fiddle
You can make use of CSS3 flexible box for your alignment. align-items: center will align the elements inside the flexible box container to be in the center of cross-axis(vertical-plane).
JSfiddle demo
.moving {
margin-top: 10px;
}
textarea {
resize: none;
}
.moving .centered-vertically {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row moving">
<div class="col-md-12 centered-vertically"> <span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span> <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span> <span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1">
<h4>Step</h4>
</td>
<td class="col-md-8">
<textarea class="form-control"></textarea>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span>
</td>
<td class="col-md-1"><span>X</span>
</td>
</tr>
</table>