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>
Related
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>
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>
I am building a website that has the usual social media links in a footer on my page:
They are hosted in an HTML element coded as:
<div class="social">
<table>
<tr>
<td>Tweet </td>
<td>
<div
class="fb-like"
data-href="#Context.Request.Scheme://#Context.Request.Host.ToString()#Context.Request.PathBase#Context.Request.Path"
data-layout="button"
data-action="like"
data-show-faces="true">
</div>
</td>
<td>
<script type="IN/Share" data-counter="right">
</script>
</td>
<td><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" border="0" /></td>
</tr>
</table>
</div>
How can I force the alignment or padding of the buttons to be consistent?
Alternatively, if I want to use my own icons and hide these is there a standard approach to doing that?
Thanks
Mark
The way this is constructed is wrong! Please use table for data and not for styling. Change it to a div and you'll find that making it mobile responsive is easy.
Try to nest the divs so you can just move your main div and all the sub-divs within it moves along.
Try something like this:
.social { display: inline-block; }
<div id="social-icons">
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
</div>
And to make changes when viewing from a smaller screen - eg; mobile, then use media queries to align the content when a certain device size is reached.
Media Query CSS:
#media screen and (max-width: 480px) {
.social {
display: block;
width: 100%;
}
}
Of course, change the css styling to whichever you prefer.
I would use flex instead of a table layout. Set the parent element to display: flex; and align-items: top;. That forces the direct children of .social to align at the top.
.social {
display: flex;
align-items: top;
}
.social a {
padding: 5px 10px;
margin: 5px;
background-color: yellow;
}
<div class="social">
Facebook
Instagram
Pinterest
Twitter
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social">
<table>
<tr>
<td>
<button type="button" class="btn btn-info">
<i class="fa fa-twitter" aria-hidden="true"></i>
Tweet </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Share </button>
</td>
<td>
<button type="button" class="btn btn-danger">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Save </button>
</td>
</tr>
</table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
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;
}
The dropdown on the right is in a table cell, this works as intended on desktop browser.
However on mobile, on click, the dropdown gets split into two lines:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<i class="icon-eye-open icon-white"></i> Visualizza
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Modifica</li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
The problem most likely stems from the table cell width being laid out too short for both elements.
The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
Css:
.dropdownCell { min-width:130px; }
Fiddle is here: http://jsfiddle.net/a4kx75t1/1/