/    Sign up×
Community /Pin to ProfileBookmark

Width autofit

Copy linkTweet thisAlerts:
Dec 05.2021

Just wanted to get opinions on something. In HTML, setting the width of any objects that display text or images is guesswork, trial and error. It would be helpful, useful even, if the guesswork could be taken out of the equation.
If possible, have the IDE measure the length of a value or width of an image and automatically set/adjust the width of the html object based on the text length or image width. Like width AutoFit in Excel. It would speed up web development if there was no guesswork involved. Wishful thinking perhaps?

to post a comment
HTML

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumDec 05.2021 — >measure the length of a value or width of an image and automatically set/adjust the width of the html object based on the text length or image width.

This can be done easily by setting `display: inline-block;</C> in the CSS of the wrapping element. Or, the other way round, an element can adjust it's size to the wrapping container by setting <C>width: 100%;</C> and <C>height: auto;`. No IDE needed.

If this is not what you are looking for, please explain more detailed.
Copy linkTweet thisAlerts:
@rpjd1authorDec 05.2021 — The width of an object is only restricted by a parent object, however, the width of an object cannot be set automatically based on the width of the value (text) it displays, The width of an object can only be set manually. A feature like width autofit in Excel would be useful in order to set the object width based on its value (text) width. If you fill a HTML table with data width setting a width, this feature would calculate and set the width for you. Something a IDE could provide.
Copy linkTweet thisAlerts:
@SempervivumDec 05.2021 — >the width of an object cannot be set automatically based on the width of the value (text) it displays, The width of an object can only be set manually.

That's not true. Try this demo: Activate "Result" and type some text - the size of the container will adjust automatically to the width of the text.

https://jsfiddle.net/Sempervivum/r1a7809w/
Copy linkTweet thisAlerts:
@justbenDec 05.2021 — You could use flex and set the flex-basis to max-content. Here is a link to it if it helps [https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis]
Copy linkTweet thisAlerts:
@rpjd1authorDec 05.2021 — That's really useful, particularly in regards to text inputs. What about objects like buttons where there is no text input, just display? The width can only be set manually using the style width property, that I'm aware of.
Copy linkTweet thisAlerts:
@SempervivumDec 05.2021 — Seems to me that it's all the same: The size of the button adjusts to the size of the text:

https://jsfiddle.net/Sempervivum/kes1f5xL/1/
Copy linkTweet thisAlerts:
@rpjd1authorDec 05.2021 — 
If you only set the value of a button and not the width as in your example, what if you have a column of buttons and want them all the same width regardless of their values? You need to know the width of the widest button, then set the width of every other button in that column to match. Can that be done any other way besides manually?
Copy linkTweet thisAlerts:
@SempervivumDec 06.2021 — >Can that be done any other way besides manually?

Yes, this is very easy: Put the buttons in a container altogether and apply this CSS:
``<i>
</i>#container {
display: inline-flex;
flex-direction: column:
/* This will stretch the buttons to the same width: */
align-items: stretch;
}<i>
</i>``
Demo:

https://jsfiddle.net/Sempervivum/fydjuhnt/2/

Reference:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Copy linkTweet thisAlerts:
@rpjd1authorDec 06.2021 — I tried that with a inputs of type button in a table. The button widths are not the same. Should that work in all situations or is there a limitation to that scenario?
Copy linkTweet thisAlerts:
@SempervivumDec 06.2021 — A table is completely different. You need to apply `width: 100%;` to the buttons in order to make them fill the cell:

https://jsfiddle.net/Sempervivum/fydjuhnt/3/
×

Success!

Help @rpjd1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...