Calculate width from auto to pixel then add by pixel in LESS CSS

Question

I want to use auto width and add x pixels to it.
How can this be acheived Less file?

span 
{
    width:calc(auto + 100px);
}

I want to use auto, since I don't know the length of the text. But I know a fixed size text gets append to it at some point. I don't want the span to grow larger when this happen. Therefore, adding 100px to auto would handle it perfectly.

I don't think that's possible except *possibly* by javascript. `auto` wouldn't be defined until the page had loaded and by then your styles have been rendered...so it's too late. — Paulie_D, Jun 18 '15 at 16:01
Could you not just leave it as auto but add padding on each side? I'm curious to see what actual problem you are solving here. — Paulie_D, Jun 18 '15 at 16:04
You might be able to achieve something like this using `padding` on the sides of the element.. Could you show us the problem? — Alex, Jun 18 '15 at 16:11

score 1 · Answer 1 · edited May 23 '17 at 11:58

You should do this with JQuery.

window.onload = function(){
  $('span').width($('span').width()+100px);
};

And the CSS code remains

span{
  width: auto;
}

EDIT: If the span content changes after the onload function is being executed, then you should execute that line whenever the content changes.

Here you can find how to do this. Credits to @Emile

1- The jQuery change event is used only on user input fields because if anything else is manipulated (e.g., a div), that manipulation is coming from code. So, find where the manipulation occurs, and then add whatever you need to there.

2- But if that's not possible for any reason (you're using a complicated plugin or can't find any "callback" possibilities) then the jQuery approach I'd suggest is:

a. For simple DOM manipulation, use jQuery chaining and traversing, $("#content").html('something').end().find(whatever)....

b. If you'd like to do something else, employ jQuery's bind with custom event and triggerHandler

$("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) { //Custom-action });

Here's a link to jQuery trigger handler: http://api.jquery.com/triggerHandler/

score 0 · Answer 2 · answered Jun 19 '15 at 18:10

As stated by @Paulie_D, this wasn't possible. Proposed solution to handle this with Javascript would probably work, but I prefer to avoid this solution as I don't like handling the layout with Javascript instead of HTML/CSS.

The solution I used :
Use a DIV instead of a SPAN. This allowed to add another div inside it with a fixed width of 100px. This way, the parent div size to content including this 100px child div. Thus making the +100 needed.

When extra content is added, child div is used to display the extra content instead.

<div class="ParentDiv">
   TextWithVariableLength
   <div class = "ChildDiv"></div>
</div>

LESS

.ParentDiv
{
  width: auto;
}

.ChildDiv
{
  height:100%;
  width: 100px;
}

Calculate width from auto to pixel then add by pixel in LESS CSS

2 Answers2