3

Is there a way to have buttons that auto-resize to fit its container , in order to have responsive design?

It would be even better I think If there is an approach , not based on media queries (= less code)

Hope the image helps you. Here is the CSS for the button

.formButtonfront {
 width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
 }

The browser is Chrome in a laptop, just sized down

I want the grey button (placed after the image) to fit the white container

Thanks in advance

PS About the float : I have a clear:both; in the footer. Also even If I remove the float, the result is the same.

UPDATE Here 's a jsfiddle

enter image description here

slevin
  • 4,166
  • 20
  • 69
  • 129

3 Answers3

5

So you don't need display: block or float: none, but a max-width

.formButtonfront {
  border:1px solid gray;
  border-radius:7%;
  font-size:0.875;
  word-wrap: break-word;
  width: 100px; // only for IE8
  max-width: 100%;
 }

Look at this fiddle (I reduce the size of the content to see how it looks)

thomasstephn
  • 3,775
  • 4
  • 24
  • 29
  • Thanks. One last thing : `max-width` is not supported by IE<8 if I remember correctly. Any suggestions? – slevin Nov 12 '13 at 00:20
  • This is not really an IE8 issue since IE8 does support the ```max-width``` attribute but only when given a defined width first. So try something like ```width: 100%; max-width: 25em;``` . I edited my answer – thomasstephn Nov 12 '13 at 00:30
  • Your anser is good, but `word-wrap` is not a good idea aesthetically, to be honest. Breaks words out of control. I found this`http://stackoverflow.com/questions/11798926/tweaking-performance-of-elegant-solution-to-text-resize-for-fluid-responsive-des` and I try to do something like `onresize=onload=function(){document.getElementById("button").style.fontSize=document.getElementsByClassName("container").innerWidth+"px"};` combined with `width:auto` but, cannot get it to work... – slevin Nov 12 '13 at 02:45
  • The box is resizing which was your question, after that it's a design decision I agree. Either word wrap, small font or text-overflow: ellipsis – thomasstephn Nov 12 '13 at 10:36
2

make float: none and display: block for that button.

It will make button as container and fit the parent box.

I think it will help you.

nikoloza
  • 968
  • 2
  • 12
  • 30
  • Thanks fot the anser, but sorry, this not helping at all. The button is still outside the container – slevin Nov 11 '13 at 23:40
  • 1. Remove the height property on the white box. 2. Maybe your text on the button looks much bigger than width of container? Try `word-wrap: break-word` and `width: 100%` please. – nikoloza Nov 11 '13 at 23:50
  • `word-wrap` helps a little. But, `width:100%` creates a huge button when the browser is not sized down. And If I put `width:40%` the button is not big when the browser is sized down, but the letters are the one above the other... Anyway, I added a link to my question... – slevin Nov 12 '13 at 00:00
1

button{
  width: 250px;
  max-width: 100%;
  padding: 15px;
}
<button>
  Button
</button>
TiiGRUS
  • 85
  • 1
  • 4