I am not good at css, but here is what I want and what i have tried.
<div>
<div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak >
<table class="table table-striped table-bordered">
<tbody>
<tr data-ng-repeat="(k,v) in properties">
<td>{{ k }}</td>
<td>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 20px;">
<button type="submit" class="btn btn-primary btn-sm"
title="Refresh for updated properties"
ng-click="onRefreshButtonClick()">
<span class="glyphicon glyphicon-refresh">Refresh</span>
</button>
</span>
</div>
</div>
So, I have this cluttered button glyphicon glyphicon-refresh inside a class="btn btn-primary btn-sm"
I need some space between these two. When I tried padding style it did not work. padding is getting applied to the entire button obviously!
How can I achieve padding between glyphicon glyphicon-refresh and class="btn btn-primary btn-sm" ?
When I click on Refresh, I want the id:propertiesTable to be masked(meaning light dimness for this part). Is this achievable?
Sorry about this question. Not good at CSS.
Thank you Stackoverflow!
You can just add a non-breaking space: http://jsfiddle.net/mm6ck3dc/9/
<span class="glyphicon glyphicon-refresh"> Refresh</span>
Related
I am trying to create a responsive table. The first column is only text value but other columns have text value and a button. While using hr tag, the misalignment of cells is quite visible. Here's a plunker demo.
Is there any way to align the cells while keeping the table responsive? The following code isn't accurate.
<div class="table-responsive">
<table class="table table-striped table-bordered hover col-sm-11 ">
</td>
<td>
<div>4</div><br>
<div id="roomID1"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
<hr>
<div>12</div><br>
<div id="roomID2"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
<hr>
<div>12</div><br>
<div id="roomID2"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
<hr>
</td>
</tr>
</table>
</div>
</div>
You should be having < td > for every cell as shown below and alignment would get fixed
<td>
<div><strong>AC Room - 4 Bed<br>
<font style="color:green;"> (Capacity:4 Person)</font><br>
<font style="color:purple;"> (Charges: 1250 INR)</font><br>
</strong><hr>
</div>
</td>
<td>
<div><strong>AC Room - Double Bed<br>
<font style="color:green;"> (Capacity:2 Person)</font><br>
<font style="color:purple;"> (Charges: 850 INR)</font><br>
</strong><hr>
</div>
</td>
How to display two buttons as block elements on small screens as well as inline elements on larger screens, when one of the buttons is wrapped inside a form?
I have two buttons, one is only a local link, the other one is wrapped (by my colleague) inside a from. Now I'm getting problems when displaying the page on smaller screens. The button inside the form will not appear as a block element anymore.
Result should look like this:
Small screen:
| button1 |
| button2 |
Large screen:
| button1 | | button2 |
My code so far:
https://www.bootply.com/CETPAyWp2K
(resize screen width to see the effect)
You need to update your styles to make the button take full space in mobile view.
Try using the following styles, that should work:
form { display: block; }
form button {
width:100%;
}
#media (min-width: 992px) {
form {
display: inline;
}
form button {
width: auto;
}
}
Use w-100 to button[type="submit"]
and in media-query of lg screen use:
#media (min-width: 992px) {
form {
display: inline;
}
button[type="submit"]{
width: auto!important;
}
}
See fiddle:https://jsfiddle.net/m9n4dgw7/5/
form { display: block;
}
#media (min-width: 992px) {
form {
display: inline;
}
button[type="submit"]{
width: auto!important;
}
}
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="text-right">Action</th>
</tr>
</thead>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<tbody>
<tr>
<td class="content_name">Samplecol 1</td>
<td class="text-right">
<a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
<form action="http://localhost:10777/Delete/3aac236e" method="post">
<button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>
</form>
</td>
</tr>
<tr>
<td class="content_name">Samplecol 2</td>
<td class="text-right">
<a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
<form action="http://localhost:10777/Delete/d81de31b" method="post">
<button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>
</form>
</td>
</tr>
</tbody>
</table>
You can use Bootstrap and his grid to do responsive buttons.
For example you can use it as follow :
<td class="text-right">
<a class="btn btn-warning btn-sm col-md-3 col-sm-12 mb-1 mb-lg-0" href="#">Edit</a>
<form action="http://localhost:10777/Delete/3aac236e" method="post">
<button class="btn btn-danger btn-sm d-block d-lg-inline col-md-3 col-sm-12 mb-1 mb-lg-0" type="submit">Delete</button>
</form>
</td>
In this example buttons use full width on small devices and 1/4 width on other devices.
I am trying to insert an input in the header of Angular-UI's accordion, but the accordion messes up when the input is shown. I think it might be because I hide the actual heading text so the height of the header changes and the accordion messes up. Ideally, I would like to keep the height dynamic (responsive point-of-view), but a fixed height will do as well.
When the edit button is clicked, I want to show an input field in the header so the user can update the text (saving, or binding the value is not a concern.. just want to show the input field correctly).
I have a demo of what I am wanting using a table, and I would like to replicate that functionality into the accordion header.
<table class="table table-bordered table-striped table-hover">
<thead>
<tr id="th-row">
<th>Name</th>
<th class="col-xs-1">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span ng-show="!edit" ng-model="personName">John Smith</span>
<div ng-show="edit" class="col-xs-12">
<input type="text" ng-model="personName" ng-required="true" value="" class="form-control" placeholder="Person Name">
</div>
</td>
<td>
<button ng-show="!edit" class="btn btn-xs btn-primary" ng-click="edit = true">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button ng-show="edit" class="btn btn-xs btn-danger" ng-click="edit = false">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
Now my accordion code:
<accordion-group>
<accordion-heading>
<span ng-show="!edit1" ng-model="headingName">Header with Button group</span>
<div ng-show="edit1" class="col-xs-12">
<input type="text" ng-model="headingName" ng-required="true" value="" class="form-control" placeholder="Heading Name">
</div>
<div class="pull-right">
<button ng-show="!edit1" class="btn btn-info btn-xs" ng-click="edit1 = true; $event.stopPropagation();"><i class="glyphicon glyphicon-edit"></i></button>
<button ng-show="edit1" class="btn btn-danger btn-xs" ng-click="edit1 = false; $event.stopPropagation();"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here is a Plunker Demo
How to do not allow the arrow to go to another line? This will happens if the screen did not have enough space, see the image:
JSFIDDLE
CODE:
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="shrink">COLUMN 1</th>
<th class="shrink">COLUMN 2</th>
<th class="expand">COLUMN 3</th>
<th class="expand">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 0</li>
</ul>
</div>
</td>
<td>Some info here again</td>
<td>yay more info here too</td>
<td>ok, enough info now, that is enough</td>
</tr>
</tbody>
</table>
Tried some white-space: nowrap; but could not get the desired result. Any help will be great. The arrow must be in the right side, always.
Instead of floating the carets right, float the text left.
<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>
Demo
span.pull-right floats the i.fa-caret-down to the right after your “Description of the item”, which means it’s placed on the next line. Try putting the float before the description. For example:
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left"
data-hover="dropdown" data-toggle="dropdown">
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
Description of the item
</span>
Sample, fixing the first caret.
Setting the white-space: nowrap property will not effect the dropdown icon as it's in a different flow due to the float: right; applied to it by the class .pull-right.
What you're describing sounds as though you want to set a position: absolute against the icon. This does fix the issue of the icon not being effected by the text, but it raises a further question of, how do you want to resolve too much text in a button which isn't sufficiently big?
As far as I can see, the only way to resolve this would be to also apply an overflow: hidden property to the buttons, to force the spacing to the right where the icon sits to be empty, and to apply an ellipsis on the text if any overflow does occur. You can see the combination of these selectors in this JSFiddle, I have forced the buttons to be smaller purely to demonstrate how this would work when they are forced to consume a space smaller that you would otherwise like:
.btn {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.fixed-right {
position: absolute;
right: 5px;
}
I'm having troubles aligning things in a table row. I have an hyperlink and an inline-form made up of one textbox and one button.
The problem is that the button goes to the next line instead of being aligned with the textbox. The problem occurs in Chrome, but it works fine in IE10
I use twitter bootstrap for css. This jsfiddle illustrates the problem : http://jsfiddle.net/Tq9Qm/
Can you help me ?
the code of jsfiddle:
<table class="view-header">
<tbody>
<tr>
<td> <span>Edition du mandat </span>
</td>
<td>
<div class="pull-right"> <a style="float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline" placeholder="N° de contrat, nom/numéro de client">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model" />
<button disabled="disabled" class="btn btn-info" type="submit" ng-click="searchMethod()" ng-disabled=" ! canSearch()"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="pull-right">
<!-- uiIf: filterVisible -->
</div>
</td>
</tr>
</tbody>
Use pull-left it's attribute for twitter boot-strap
FiddleDemo
Nav Documentation
Try pull-left in your form
Demo
try the pull-left attribute
it will helps you