I have a very simple table and I want to vertically align the text of two elements, one of which is plain text and the other is a button (I've put them in span tags, because I've been trying different things), so now the code snippet looks like that:
<tr>
<td>element</td>
<td>
<span> test </span>
<span>
<button class="btn btn-danger pull-right">Delete</button>
</span>
</td>
</tr>
and
th, tr, td{
vertical-align: middle !important;
}
Unfortunately no matter what I try, as long as I use the pull-right class it looks like this:
The "test" element just won't align in the middle or align with the "Delete" text of the button. Any tips would be appreciated!
remove pull-right class and try this instead :
<tr>
<td>element</td>
<td class="d-flex align-items-center justify-content-between">
<span> test </span>
<span>
<button class="btn btn-danger">Delete</button>
</span>
</td>
</tr>
try this:
span.test{
line-height: 35px;
}
th, td {
border: 1px solid black;
}
<tr>
<td>element</td>
<td>
<span class="float-left test"> test </span>
<span class="float-right">
<button class="btn btn-danger pull-right">Delete</button>
</span>
</td>
</tr>
Related
i have a td
<td align="left">
<button class="button_tabel"><div class="button_tabel_text_hero"> hero</div> </button>
<!-- todo Put a gap here 48 px -->
<button class="button_tabel"><div class="button_tabel_text_zero"> zero </div> </button>
</td>
How can i put a gap of around 48 px in between these two buttons which lie in this td
i wish to put space separately out of buttons so that this can be changed from backbone easily without impacting other components
Put some margin on one of the buttons:
<td align="left">
<button class="button_tabel">
<div class="button_tabel_text_hero"> hero</div>
</button>
<button class="button_tabel">
<div class="button_tabel_text_zero"> zero </div>
</button>
</td>
.button_tabel:first-of-type {
margin-bottom: 48px;
}
Add margin-left:48px on .button_tabel
.button_tabel + .button_tabel{
margin-left:48px;
}
Just select the first class and add a margin:
.button_tabel:first-child{
margin-right:48px;
}
<td align="left">
<button class="button_tabel"><div class="button_tabel_text_hero"> hero</div> </button>
<!-- todo Put a gap here 48 px -->
<button class="button_tabel"><div class="button_tabel_text_zero"> zero </div> </button>
</td>
I'm trying to edit my code so, that if I hover over the delete button, the text gets a strikethrough-line, just like the css option text-decoration: line-through does.
EDIT:
I'm trying to have the Text "Creating this basic TODO Website" with a strikethrough, when hovering over the delete button
Is there a way to achieve this, without using JS, or do I need to use JS? (I'm currently using Bootstrap4)
The Code part is:
<tr>
<th scope="row">3</th>
<td class="text-justify">Creating this basic TODO Website</td>
<td>14/05/2020</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
Okay, I think I understand your problem. The problem is there is no "previous sibling" or "parent" selector in css. But I think a little bit tricky dom modification, and pure css, you can achive your goal.
table tr {
display:flex;
flex-direction: row-reverse;
}
table tr td:hover+td+td+td+td.your-text {
text-decoration: line-through;
}
<table border=1>
<tr>
<td>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>14/05/2020</td>
<td class="text-justify your-text">Creating this basic TODO Website</td>
<th scope="row">3</th>
</tr>
</table>
Explanation: The td-s are reversed, and css flexbox make re-reverse order. So it visible as normal order, but it is important: in the dom, it is reversed. After that you can use next element selector (+) more than once times. And the last trick: I split the buttons cell into two parts to access to delete button's cell exactly.
You can do it with CSS
i:hover {
text-decoration: line-through;
}
When you use bootstrap X, you can still use CSS:
button.not-available:hover, button.not-available i:hover {
text-decoration: line-through;
}
<button class="not-available">
<i>create</i>
</button>
<button>
<i>delete</i>
</button>
This has been bugging me a lot and when I try to google anything related to the subject, all I get is Stack Overflow questions about vertical-align not working on divs or similar elements.
I have this HTML table where as you can see, I set the style of each td to vertical-align:middle through an HTML inline style attribute:
<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>
So naturally I thought I could remove all of these inline styles and add this global rule in my external CSS file:
td {
vertical-align: middle;
}
But when I do that, the contents of the table's cells stop being aligned to the middle. I'm sure that the CSS file is properly linked as other elements are clearly affected by it. Also I checked the rest of the CSS and there are no other rules with higher priority overriding this property for this table. Any ideas?
Note: As you can probably figure out from the code, I'm using AngularJS and the table rows are being generated using ng-repeat, in case it could have something to do with the problem.
It's due to bootstrap overriding this with a higher specificity. This is what I see in the chrome developer console for td's:
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
I would recommend doing something like the following:
.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}
Then in your table element you can do this:
<table class="table table-striped td-vertical-center">
This will allow you to wrap this style in a custom class that will not override bootstrap by default, as well as give it enough specificity to update the table cells.
You can see a working example of a bootply here
Try this
td, th {
vertical-align: middle !important;
}
For example, I have a code:
<div class="mycontainer1" style="....">
<table class="widget title list" id="element-545">
<tbody>
<tr>
<td class="txt">11111</td>
<td class="toolbar" id="element-546">
<div class="btn export-btn" id="element-549">
<span class="fa fa-print"></span>Export
</div>
</td>
</tr>
</tbody>
</table>
</div>
I need set style for class "btn export-btn" visibility: hidden in css.
Can I resolve it in class of first div (mycontainer1)?
Touch only the first div!
Add
.mycontainer1 .btn.export-btn {
<style>
.mycontainer1 .btn.export-btn
{
visibility: hidden;
}
</style>
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.