Centering responsive expand icon in datatables

396
June 29, 2017, at 07:03 AM

EDIT:

So I was able to move the icon down manually by selecting the psuedo element and manually adding some margin,

td::before {
    margin-top:8px;
}

but obviously this won't scale if my row gets any larger vertically for some reason. Still looking for a way to Center it.

So I'm trying to center the responsive expand icon in my datatable vertically (Was able to center all the content with this line)

.table > tbody > tr > td {
    vertical-align: middle;
}

But this seems to still leave my icon unaffected. I'm also not really sure how to create a rule for it to catch it since its being dynamically generated by Datatables.

Here is the issue,

Here is an inspection of the element.

I assume I just need to make a css rule to take care of this but I can't think of what needs to happen here.

Answer 1

Here in aexample on how to center an icon in pseudo class vertically centered to container

.box { 
  background: white; 
  padding: 10px 10px 10px 30px; 
  border: 1px solid black; 
  display: inline-block; 
  position: relative; 
} 
 
.box:after { 
  font-family: 'FontAwesome'; 
  content: "\f055"; 
  position: absolute; 
  top: 50%; 
  left: 5px; 
  display: inline-block; 
  transform: translateY(-50%); 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<div class="box"> 
 +15.00$ 
</div>

Rent Charter Buses Company
READ ALSO
Ionic fab, pop up instead of drop down?

Ionic fab, pop up instead of drop down?

I am working in ionic, and I have tabs placed at the bottom of the screenI am using an ionic fab "right bottom" style but the tabs seem to block the drop down of the ionic fab

238
How can I get my div inside my li element to appear first with css

How can I get my div inside my li element to appear first with css

I am trying to get my div to appear on it's own line and force the li to the next lineI can't change the html or reorganize the elements

252
Using babelify in Gulp, importing css results to unexpected token &ldquo;{&rdquo;

Using babelify in Gulp, importing css results to unexpected token “{”

I'm importing a css in my jsx, and using gulp with browserify and babelifySomehow I'm getting this error: error screenshot

442
Typewriter glitch

Typewriter glitch

I've the following code for typewriter in which the words are typed when user scrolls to the second sectionEverything is going fine except some words are not being typed out smoothly

437