When the direction is set to rtl, special characters that are supposed to be at the

Question

When the direction is set to rtl, special characters that are supposed to be at the

When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting the leading backslashes as trailing, which could confuse users. How can I prevent this from happening.

For reference, here is the link to the code snippet: http://jsfiddle.net/pguwo67m/2/

Currently, I am working on:

Additional Note

I have also observed that this issue occurs with other leading special characters. Fiddle: http://jsfiddle.net/6L1az99t/1/

css html

Answer 1

Answer №1

Have you considered this method to shorten the path if it is too long:

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

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

function adjustWidths() {
  // grab 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>

Answer 2

Have you considered this method to shorten the path if it is too long:

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

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

function adjustWidths() {
  // grab 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>

Answer 3

Answer №2

Take a look at this.

Updates - 1. Insert text within span under label 2. Adjust width and format of the span element to block display.

That's all for now.

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="editable"><span> \\\\development\productinfo.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="editable"><span>\development\application\models\cron\dropshipmodel.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="editable"><span>\develoment\application\controllers\cron\dropship.php</span></label>
    <div style="clear:both;"></div>
</div>
    <div>
    <input type="checkbox">
    <label  class="editable"><span>This is normal text, i want to display end part of a string</span></label>
    <div style="clear:both;"></div>
</div>

Thank you.

Answer 4

Take a look at this.

Updates - 1. Insert text within span under label 2. Adjust width and format of the span element to block display.

That's all for now.

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="editable"><span> \\\\development\productinfo.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="editable"><span>\development\application\models\cron\dropshipmodel.php</span></label>
    <div style="clear:both;"></div>
</div>
<div>
    <input type="checkbox">
    <label  class="editable"><span>\develoment\application\controllers\cron\dropship.php</span></label>
    <div style="clear:both;"></div>
</div>
    <div>
    <input type="checkbox">
    <label  class="editable"><span>This is normal text, i want to display end part of a string</span></label>
    <div style="clear:both;"></div>
</div>

Thank you.

When the direction is set to rtl, special characters that are supposed to be at the

Answer №1

Answer №2

Similar questions

The alignment of vertical text can impact the positioning of surrounding text

Executing PHP code on button click in HTMLThe process of running a PHP script when

Hover effect triggered upon mouse exit

Issue with iOS 10: Changes to class not reflected in CSS/styles

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

Basic AJAX request not functioning properly

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Easily move elements using a jQuery click animation

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

Can you modify the color of the dots within the letters "i"?

Align text vertically within Bootstrap carousel area

Swiftly accessing information from the internet

Arrange the header and input within a div using flexbox to achieve different alignments

What is the best method for transforming a stream into a file with AngularJS?

How to dynamically add table rows and cells with JavaScript using a single selection input

Is there a way to use jQuery to efficiently refresh all values within a table?

The art of spinning in CSS

Guide to implementing tooltips for disabled <li> elements in AngularJS

Using AJAX in JavaScript within an HTML document is a valuable skill to have

Using data attributes for assigning them to a div container - a complete guide!