CODEWITHSUNDEEP
htmlcss
Xheldon Cao
Xheldon Cao

Reputation: 337

Position fixed element is not apply max-width 100% of window's width

I have an element, of id "r-u-ok". It's a pop-up and its content can have different word counts.

I want to set only the max-width, not the fixed width. A fixed width can't self-adapt to the content's word count. Besides, I also hope to vertical align it in the middle and horizontal align it to the center.

But even when I set 100% to max-width attribute, its max-width still is not the width of window, though it contains many words.

WHY?

Ignore my poor English.

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 70%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

Here is an example: fiddle link

Upvotes: 2

Views: 2788

Answers (4)

Mr Lister
Mr Lister

Reputation: 46579

The problem is that with the left:50%, the system thinks you want to restrict the width to half of the window, even though you translate the whole thing by -50%.
So what you need to do is set the width explicitly. There is no other way. Otherwise you'd be stuck with this half.

Fortunately, width: 100% is not the only solution. What you can do is width: max-content, which does exactly what you need.
Unfortunately, it doesn't work in all browsers. IE and Edge will not comply. But most others will, if you provide the right prefixes.

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 99%; /* changed */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
  /* added */
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
}
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

Upvotes: 2

Pete
Pete

Reputation: 58432

I think due to the position fixed, the div cannot grow as it would in normal document flow. To get over this, use an extra div - the outer div to position and the inner div can then grow with it's content:

#r-u-ok {
    position: fixed;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    text-align:center;
}
#r-u-ok > div {
    display: inline-block;
    max-width: 100%;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
}
<div id="r-u-ok">
  <div>
  I think it should 100% width of this window, if the word more enough.
  </div>
</div>

Updated Fiddle

Upvotes: 2

Sankar
Sankar

Reputation: 7107

Just add width:100%

#r-u-ok {
  position: fixed;
  /* display: none; */
  width: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}
i have a demand, the element, which id is "r-u-ok",is a pop, has a several possibility of content's word count.it's judge by a ajax request's callback data. and i want the element only has a max-width, not a fixed width.a fixed width can't self-adaption
the content's word count, besides i also hope it is vertical align middle and horizontal align center. but, even i set 100% to max-width attribute, it's max-width still not the width of window, though it's contain many word. WHY?
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

Upvotes: 1

Konstantinos Koletsas
Konstantinos Koletsas

Reputation: 239

I assume you want to display this div in full width. In order to do that:

Remove

max-width: 70%;

Add

width: 100%;

OR

width: 100vw;

Upvotes: 0

Related Questions