CODEWITHSUNDEEP
css
EvilDr
EvilDr

Reputation: 9622

Expand element widths to match expanded screen width

A question was asked a few years ago whereby if an element's width is larger than the screen width, then other block elements (h1 etc.) do not expand to match (see fiddle whereby the h1 width does not change after the wide element appears):

function addElement(){
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
    // $("h1").width($(".wide").width()); // <-- trying to avoid needing this
}
body {margin:0; padding:0}
h1 {background-color:#eee}
.wide {background-color:#00c; color:#fff; width:110%; margin-top:1em; margin-bottom:1em}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

Although the original answer did work, now that CSS3 is more mainstream, I wondered whether there was any smarter way to accomplish the goal, without resizing manually using JQuery? For example, is there a pure CSS solution? I do not know the width of the element in advance (its a table of data from an ERP system and sometimes can be very wide).

If not, I'm happy to delete the question, but couldn't think of a way to draw attention back to an older problem whereby a better solution may now exist.

Upvotes: 6

Views: 411

Answers (4)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

If body and its block elements expanded to match .wide's width, then .wide would no longer be 110%. That's really the crux of the problem.

The easiest solution may be to set the widths of both body and .wide in pixels, after .wide has been added to the DOM.

function addElement(){
  $("#para").after('<div class="wide">Wide</div>');
  $("a").fadeOut();
  $('body, .wide').width($('.wide').width());
}
body {margin:0; padding:0;}

h1 {background-color:#eee;}

.wide {background-color:#00c; color:#fff; width:110%; margin-top:1em; margin-bottom:1em}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

Upvotes: 1

DeadEli
DeadEli

Reputation: 1053

What I think you want is to set the width of the parent object of .wide, and have the children of that parent affect the width of all of its children.

I decided to change it so instead of your new element having the class wide, I gave that class to its parent (body in this case) because css doesn't have a parent selector, so this seemed like the simplest solution.

function addElement(){
    $("#para").after('<div class="foo">Wide</div>'); // <-- updated
    $("a").fadeOut();
    $("body").addClass("wide"); // <-- new
}
body {margin:0; padding:0}
h1 {background-color:#eee; width: 100%;}
.foo {background-color:#00c; color:#fff; margin-top:1em; margin-bottom:1em} // <-- updated
.wide { width: 110%; } // <-- new
.wide > * { width: auto; } // <-- new
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

It is slightly different from how you doing things, but I think that it should accomplish what you are trying to do

Update:

Instead of 

$("body").addClass("wide");

adding 

$("#para").parent().addClass("wide");
$("#para").parent().width($("#para").parent().width()*1.1);

should work with the tables, but I'm not sure if you'll find this any better than

$("h1").width($(".wide").width());

which you were trying to avoid.

JSFiddle

Upvotes: 3

Stickers
Stickers

Reputation: 78676

It could work if you set the body and the wide block style as follows. It is the only pure CSS solution that I can think of.

JSFIDDLE DEMO

function addElement() {
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
}
body {
    margin: 0;
    display: inline-block; /*key*/
    min-width: 100%; /*key*/
}
h1 {
    background-color: #ccc;
}
.wide {
    background-color: #00c;
    color: #fff;
    min-width: 1000px; /*percentage won't work, but vw works i.e. 110vw */
    margin-top: 1em;
    margin-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

Upvotes: 1

Ole Sauffaus
Ole Sauffaus

Reputation: 534

As you know the width for your wide element (in this case 110%), you could just define your css 'wide'-class for body, instead of for the inserted element, like this:

body { margin:0; padding:0 }
body.wide { width:110%; } //<<< new
h1 { background-color:#eee; }
div { background-color:#00c; color:#fff; margin-top:1em; margin-bottom:1em; }

... and then simplyfy your JS to the following:

function addElement(){
    $('body').addClass('wide').find("#para").after('<div>Wide</div>');
    $("a").fadeOut();
}

... off course, when you remove the inserted element from dom, you must also remove the 'wide'-class from body.

Upvotes: 0

Related Questions