September 14, 2016

relative position and left and right property together not working, only left is working

Ua_boaz’s Question:

I am using this tree grid directive, and below css is taken directly from this library.

.tree-grid .level-2 .indented {
    position : relative;
    left     : 20px;

<td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"></i></a><span class="indented tree-label tree-grid-row level-2>
             Citi Corporate and Investment Banking</span>

The problem i am having is that span inside td is overflow and showing in the next column, for that purpose i need to add right:20px, but it is not working.

Is there any solution to this problem

Just adding padding-right: 20px; gives what you are asking.

I selected the targeted span from CSS like

<!DOCTYPE html>
<html ng-app="abas-web">
    span.indented.tree-label {
      padding-right: 20px;



Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!