CODEWITHSUNDEEP
htmlcss
J Tovell
J Tovell

Reputation: 53

CSS submit button width incorrect

I have an input (type="submit") as a button, and it should just be as wide/high as the text plus the padding. This has worked with previous buttons I have done, but now it doesn't seem to work. The button text displays as two lines, but it should only be displaying as one.

.account-container.edit,
.information,
input.account-save {
  width: fit-content;
  font-size: 1em;
  padding: 2% 6%;
  color: white;
  background-color: #55ad47;
  border-radius: 1em;
  margin: 0 auto;
  resize: auto;
  line-height: normal;
  display: block;
}

.account-container.edit,
.information,
input,
textarea {
  letter-spacing: 0.01em;
  border: none;
}

* {
  box-sizing: border-box;
  font-family: Myriad Pro, sans-serif;
  font-style: normal;
  text-decoration: none;
  list-style: none;
  outline-width: 0;
}
<input type="submit" class="account-save" value="Save Profile">

The strange thing is that if you inspect element and toggle any of the dimension parameters of the button, it "fixes" itself and changes to the dimensions it should be:

Before

It should look like this (and does after toggling width etc.)

After

Any help would be greatly appreciated!

Upvotes: 0

Views: 268

Answers (3)

WebDude0482
WebDude0482

Reputation: 760

I added white-space: break-spaces; and now the value, what people see in the button, wraps nicely with the suggestions above. Check your line-height too.

Upvotes: 0

J Tovell
J Tovell

Reputation: 53

I worked out that I was setting my padding as a percent, which was calculated as a percent of the whole screen / parent container, and not of the "fit-content" size of the input. Therefore, the input was the right size for the text, but the padding was shifting the text over off-axis, and the full size of the button was not calculated to include the padding.

(the size of the padding was calculated after the size of the input was calculated, and a toggle of the dimensions in "inspect element" was recalculating the size of the input, this time accounting for the padding, which was previously assumed to be 0)

Upvotes: 0

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

Try setting fit-content fallbacks for older browsers:

width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;

IE does not support the property at all. mdn-fit-content

According to mdn-resize there is no auto value for resize. You might want to choose something valid here.

Other than that it looks okay. You may want to tell us, what browsers you did the tests on so that I (or someone else) can test it properly.

I have tested it to be good looking on:

  • Firefox 77.01
  • Safari 13.1.1

Upvotes: 1

Related Questions