Styjun

Why do radiation hardened IC packages often have long leads?

What is the Leave No Trace way to dispose of coffee grounds?

Why is long-term living in Almost-Earth causing severe health problems?

Razzle Dazzle simulator

Who is "He that flies" in Lord of the Rings?

Does the new finding on "reversing a quantum jump mid-flight" rule out any interpretations of QM?

NUL delimited variable

Was Self-modifying-code possible just using BASIC?

What would be the way to say "just saying" in German? (Not the literal translation)

How can I remove material from this wood beam?

Why did Intel abandon unified CPU cache?

Oil draining out shortly after turbo hose detached/broke

Can there be absolute velocity?

Do you have to have figures when playing D&D?

To what extent do precedents in Westminster systems apply in other countries that use it?

Does the Nuka-Cola bottler actually generate nuka cola?

ASCII Meme Arrow Generator

Should I refuse to be named as co-author of a low quality paper?

Why did the World Bank set the global poverty line at $1.90?

Cathode rays and the cathode rays tube

A Salute to Poetry

Confused with atmospheric pressure equals plastic balloon’s inner pressure

How was the airlock installed on the Space Shuttle mid deck?

Wizard clothing for warm weather

Can I set an element's size to fit its potential content, rather than its actual content?

CSS - fixed element width set to specific internal content?CSS Layout with Pixel And PercentsText in neighboring divs unaligned due to radio button?Facebook Like Button Align Text In Iframe to the rightHow to place items relatively in HTML?Is it really impossible to make a div fit its size to its content?Tables don't layout properly in IE7-9Having trouble to create a third column in this HTML code. How to do this?Prevent element width from shrinkingResponsive layouting with mdbootstrap 4Align flexbox items horizontally with unwrappable variable-width item

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

Consider this bar of buttons:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

Now let's say that the last button's content changes:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

As you can see, this change in the rightmost button triggered all buttons to its left to move.

To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.

Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.

Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.

What is the canonical solution to troubles like this?

css width

share|improve this question

edited Mar 24 at 21:59

gaazkam

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

add a comment | 

1

Consider this bar of buttons:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

Now let's say that the last button's content changes:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

As you can see, this change in the rightmost button triggered all buttons to its left to move.

To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.

Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.

Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.

What is the canonical solution to troubles like this?

css width

share|improve this question

edited Mar 24 at 21:59

gaazkam

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

add a comment | 

Consider this bar of buttons:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

Now let's say that the last button's content changes:

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

As you can see, this change in the rightmost button triggered all buttons to its left to move.

To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.

Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.

Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.

What is the canonical solution to troubles like this?

css width

share|improve this question

edited Mar 24 at 21:59

gaazkam

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

body text-align: right;

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

body text-align: right;

#del display: inline-block; width: 220px;

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

share|improve this question

edited Mar 24 at 21:59

gaazkam

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

share|improve this question

edited Mar 24 at 21:59

gaazkam

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

asked Mar 24 at 21:53

gaazkamgaazkam

2,61911044

1 Answer
1

active

oldest

votes

1

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.

You can also keep the main text inside:

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

share|improve this answer

edited Mar 24 at 22:16

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Very nice. Doesn't this, however, break accessibility?
  
  – gaazkam
  Mar 24 at 22:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam I don't think so since it's about a delete button but you can still keep the content inside and hide it using opactiy or another technique (will edit the answer)
  
  – Temani Afif
  Mar 24 at 22:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam check the update
  
  – Temani Afif
  Mar 24 at 22:16
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328936%2fcan-i-set-an-elements-size-to-fit-its-potential-content-rather-than-its-actual%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.

You can also keep the main text inside:

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

share|improve this answer

edited Mar 24 at 22:16

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Very nice. Doesn't this, however, break accessibility?
  
  – gaazkam
  Mar 24 at 22:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam I don't think so since it's about a delete button but you can still keep the content inside and hide it using opactiy or another technique (will edit the answer)
  
  – Temani Afif
  Mar 24 at 22:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam check the update
  
  – Temani Afif
  Mar 24 at 22:16
  

  
  
  
  

add a comment | 

1

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.

You can also keep the main text inside:

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

share|improve this answer

edited Mar 24 at 22:16

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Very nice. Doesn't this, however, break accessibility?
  
  – gaazkam
  Mar 24 at 22:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam I don't think so since it's about a delete button but you can still keep the content inside and hide it using opactiy or another technique (will edit the answer)
  
  – Temani Afif
  Mar 24 at 22:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @gaazkam check the update
  
  – Temani Afif
  Mar 24 at 22:16
  

  
  
  
  

add a comment | 

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.

You can also keep the main text inside:

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

share|improve this answer

edited Mar 24 at 22:16

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

div 
 text-align: right;


#del 
 display: inline-block;
 position: relative


#del:before 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover::before 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

div 
 text-align: right;
 font-size:14px;


#del 
 display: inline-block;
 position: relative;


#del span 
 content: attr(data-text);
 position:absolute;
 left:0;
 right:0;
 top:1px; /*there is 1px default padding */
 text-align:center;


#del:after 
 content: attr(data-alt);
 opacity:0;



#del:hover span 
 opacity:0;

#del:hover::after 
 opacity:1;

<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>

share|improve this answer

edited Mar 24 at 22:16

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102

answered Mar 24 at 21:59

Temani AfifTemani Afif

89.8k1052102