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>

POPULAR ONLINE

MYSQL view containing a row for each element in string

Convert a JS variable value into another [on hold]

How to change CSS style of JFoenix Color Picker library?

Advantage of selecting entry where username&password are correct over only selecting username and checking password in PHP? [on hold]

Conv2d and the value of padding

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

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

CSS

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

CSS

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