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

Measuring dimensions with HTML on the server - how to do it?

How to keep an image anchored at the bottom of the page without overlapping other content

A guide on switching out an HTML element with an AJAX response

What is the mechanism behind YouTube automatically playing music videos when we visit a channel's homepage?

Is it wise to use the<sup>attribute for mandatory form fields?

What steps can I take to expand this on a grander level?

I am in the process of troubleshooting why the header does not redirect correctly when clicked

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

Find the div element that wraps around the currently selected radio button

Developing tabbed sections in XSLT

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

Using Javascript to prevent css from changing the display

Choosing from a dropdown menu by pressing keys

Issue with CSS 3 gradient compatibility in Internet Explorer 8

Access a folder in JavaScript using Flask

sliderLighter: keep the slider moving smoothly at a constant speed

Master the Art of Image Loading in Codeigniter

What causes the table to expand with new cells once the database information is shown?

What are the steps for distributing a styled React component?

Ways to eliminate the border color from bootstrap multiselect