CODEWITHSUNDEEP
csshtml
Shekhar Joshi
Shekhar Joshi

Reputation: 1008

leading specialcharacters appear as trailing while using direction rtl

I am using direction property for a label. My label contains windows style directory paths(the ones with backslashes). The purpose of using direction:rtl; is to show the end part(or rather filenames) of the path, but the problem is I am getting the leading backslashes as trailing which might confuse the user. How can I prevent this.

Link to fiddle: http://jsfiddle.net/pguwo67m/2/

This is what I am working on: enter image description here

AddenduM

I have noticed that this problem also arises for other leading special characters as well. Fiddle: http://jsfiddle.net/6L1az99t/1/

Upvotes: 1

Views: 169

Answers (2)

James Coyle
James Coyle

Reputation: 10418

How about this which will remove part of the path when it is too long:

NodeList.prototype.forEach = Array.prototype.forEach;

window.onload = function () {
    adjustWidths();
};

function adjustWidths() {
  // get all label elements
  var labels = document.querySelectorAll('.path').forEach(function (lab) {
    var width = lab.getBoundingClientRect().width;
    if (width >= 260) {
      var path = lab.innerHTML;
      var pathArr = path.split("\\");
      var newpath = pathArr[0] + '\\...\\' + pathArr[pathArr.length - 1];
      lab.title = path;
      lab.innerHTML = newpath;
    }
  });
}
#wrapper {
    width: 300px;
    border: 1px solid blue;
}
input {
    width: 20px;
}
<div id="wrapper">
    <div>
        <input type="checkbox" />
        <label class="path">development\productinfo.php</label>
        <div style="clear:both;"></div>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">development\application\models\cron\dropshipmodel.php</label>
        <div style="clear:both;"></div>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">develoment\application\controllers\cron\dropship.php</label>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">development\application\models\cron\dropshipmodel.php</label>
        <div style="clear:both;"></div>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">develoment\application\controllers\cron\dropship.php</label>
        <div style="clear:both;"></div>
    </div>
        <div>
        <input type="checkbox" />
        <label class="path">development\productinfo.php</label>
        <div style="clear:both;"></div>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">development\application\models\cron\dropshipmodel.php</label>
        <div style="clear:both;"></div>
    </div>
    <div>
        <input type="checkbox" />
        <label class="path">develoment\application\controllers\cron\dropship.php</label>
    </div>
</div>

Upvotes: 2

Nikhil Chavan
Nikhil Chavan

Reputation: 1715

Check this.

Changes - 1. Add text in span inside label 2. Set width of span and display as block.

Thats it.

label {
    direction: rtl;
    float: left;
    overflow-x:hidden;
    white-space: nowrap;
}

label span{
width:150px !important;
display:block;
    
}

input {
    float: left;
}
<div>
    <input type="checkbox">
        <label class="alterable"><span> \\\\development\productinfo.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="alterable"><span>\development\application\models\cron\dropshipmodel.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="alterable"><span>\develoment\application\controllers\cron\dropship.php</span></label>
    <div style="clear:both;"></div>
</div>
    <div>
    <input type="checkbox">
    <label  class="alterable"><span>This is normal text, i want to display end part of a string</span></label>
    <div style="clear:both;"></div>
</div>

Thnaks.

Upvotes: 1

Related Questions