How to insert a new node(create with javascript) under the clicked node?.
At the moment it crosses the original div, I do not want that it crosses, it should remain in its origin
let parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
var currentSelection, currentRange, currentNode, newDiv, newContent;
currentSelection = window.getSelection();
currentRange = currentSelection.getRangeAt(0);
currentNode = currentRange.startContainer;
console.log(currentNode.nodeValue);
newDiv = document.createElement("div");
newDiv.className = 'nuevo';
newContent = document.createTextNode("holanda");
newDiv.appendChild(newContent);
this.appendChild(newDiv)
});
.nuevo {
width: auto;
height: auto;
background: red;
display: inline-block;
margin-top: 1em;
z-index: 3;
}
#parent>div {
float: left;
z-index: 1;
}
<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
<div>hello</div>
<div> *** </div>
<div>world</div>
</div>
result:
when clicked the word world
when clicked the word ***
Utilizing the offsetLeft property to locate new append elements:
let parent = document.getElementById("parent");
let rootElements = document.querySelectorAll("div.root");
for (let i = 0; i < rootElements.length; i++ ) {
rootElements[i].addEventListener("click", function(event) {
var currentSelection, currentRange, currentNode, newDiv, newContent;
currentSelection = window.getSelection();
currentRange = currentSelection.getRangeAt(0);
currentNode = currentRange.startContainer;
// console.log(currentNode.nodeValue);
newDiv = document.createElement("div");
newDiv.className = 'nuevo';
newContent = document.createTextNode("holanda");
newDiv.appendChild(newContent);
let xPos = event.currentTarget.offsetLeft;
let newEle = parent.appendChild(newDiv);
newEle.style.left = xPos + "px";
});
}
#parent {
position: relative;
left: 0px;
}
.nuevo {
display: block;
width: fit-content;
height: auto;
background: red;
position: relative;
}
.root {
vertical-align: top;
display: inline-block;
}
<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
<div class = "root">hello</div>
<div class = "root">***</div>
<div class = "root">world</div>
</div>
Update: one more way to achieve the goal
Append every new stack which actually has the same number of elements as first line. Utilize display: flex property on every new stack, and then give the inner elements corresponding width as same as their ancestor by flex-basis (why not width? this is another problem because of characteristic of flex property).
And let content of that only element which we want for visibly appending to extend the space for itself.
let parent = document.getElementById("parent");
let rootElements = document.querySelectorAll("div.root");
for (let i = 0; i < rootElements.length; i++ ) {
rootElements[i].addEventListener("click", function(event) {
newStack = document.createElement("div");
newStack.className = 'stack';
for (let j = 0; j < rootElements.length; j++) {
let grid = document.createElement("div");
grid.className = 'flexItem';
grid.setAttribute("style", "flex-basis:" + rootElements[j].getBoundingClientRect().width + "px");
if (i===j) {
grid.className += ' nuevo';
grid.textContent = 'holanda';
}
newStack.appendChild(grid)
}
parent.appendChild(newStack);
});
}
#parent {
font-size: 0px; // For eliminating gap between inline-blocks
}
.stack {
display: flex;
}
.flexItem {
flex: 0 1;
}
.nuevo {
height: auto;
background: red;
position: relative;
font-size: 16px;
}
.root {
display: inline-block;
font-size: 16px;
}
<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
<div class = "root">hello</div>
<div class = "root">*******</div>
<div class = "root">world</div>
</div>
Attach the event listener to each one of the divs inside parent so that you can use them to append your elements, also, change the display property of nuevo to block
let items = document.querySelectorAll("#parent > div");
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.addEventListener("click", function(event) {
var newDiv = document.createElement("div");
newDiv.className = 'nuevo';
newDiv.appendChild(document.createTextNode("holanda"));
newDiv.style.left = this.offsetLeft + 'px';
this.parentNode.appendChild(newDiv);
});
}
.nuevo {
width: auto;
height: auto;
background: red;
display: block;
clear: both;
position: relative;
}
#parent>div {
float: left;
}
#parent {
position: relative;
left: 0px;
}
<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
<div>hello</div>
<div> *** </div>
<div>world</div>
</div>
Related
Trying to make a grid with user input (ex. if they put 4 in, 4X4 grid.)
But I can't seem to make my code go down to the next row after it prints the 4th 'div'.
Any help would be appreciated, been stumped for days on this!
JAVASCRIPT CODE
const container = document.querySelector('#container');
// Create boxes
function createBoxes (numBox) {
for (let i =0; i < numBox*numBox; i++){
for (let j =0; j < (numBox - 1); j++){
const square = document.createElement('div');
square.setAttribute('class', 'box');
square.style.width = '25px';
square.style.height = '25px';
container.appendChild(square);
}
}
}
createBoxes(2);
CSS CODE:
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
.container {
width: 500px;
height: 500px;
}
HTML CODE:
<div id='container></div>
You need to
Correct your syntax for the container in the HTML; you're missing an ending '
In the outer loop, create a row to put all children inside when in the inner loop
Iterate only from 0 to numBox, then from 0 to numBox
Use CSS to give each row a set height (and use CSS for the cells as well, instead of assigning to their styles in JS)
const container = document.querySelector('#container');
function createBoxes(numBox) {
for (let i = 0; i < numBox; i++) {
const row = container.appendChild(document.createElement('div'));
for (let j = 0; j < numBox; j++) {
const square = document.createElement('div');
square.className = 'box';
row.appendChild(square);
}
}
}
createBoxes(2);
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
width: 25px;
height: 25px;
}
#container {
width: 500px;
height: 500px;
}
#container>div {
height: 25px;
}
<div id='container'></div>
If you don't like the doubling up of borders, you can use nth-child to, eg, hide the left border of all cells but the first in a row, or something similar, and the same sort of thing for top or bottom borders. (Or use a table and collapse the borders)
You can use css grid when working with grid layouts. Here is one way.
Correct your html to close the quotation mark in container.
Correct your css to be #container instead of .container.
The grid will calculate the width and height of each square inside the container equally.
Javascript
const container = document.querySelector('#container');
function createBoxes(numBox){
container.style.gridTemplateColumns = `repeat(${numBox}, 1fr)`;
for(let i = 0;i < numBox*numBox;i++){
const square = document.createElement('div');
square.classList.add('box');
container.appendChild(square);
}
}
createBoxes(4);
CSS
#container{
width: 500px;
height: 500px;
background: yellow;
display: grid;
}
.box{
border: 1px solid red;
box-sizing: border-box;
}
Take it
<body>
<div id="container"></div>
<script src="./1.js"></script>
</body>
const container = document.querySelector("#container");
// Create boxes
function createBoxes(numBox) {
for (let i = 0; i < numBox; i++) {
let div = document.createElement("div");
for (let j = 0; j < numBox; j++) {
let square = document.createElement("div");
square.setAttribute("class", "box");
// square.style.width = "125px";
// square.style.height = "25px";
// square.style.border = "2px solid red";
div.append(square);
}
container.append(div);
}
}
document.onload = createBoxes(5);
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
width: 125px;
height: 25px;
}
.container {
min-width: 500px;
min-height: 500px;
}
I created this JavaScript code which detects the value (number) of select tags and creates div contents based on that value and appends them into the container, but when I change the value again it keeps going, it doesn't reset.
The code is the following:
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content');
container.appendChild(content);
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.app {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 12% 88%;
background: #5F9EA0;
}
select {
width: 60px;
height: 40px;
background: red;
color: #fff;
font-size: 24px;
border-radius: 10px;
outline: none;
}
#container {
width: 100%;
height: 100%;
background: darkcyan;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
width: 150px;
height: 150px;
border-radius: 15px;
background: darkgreen;
margin: 10px;
}
<div class="app">
<select>
<option>0</option>
<option>3</option>
<option>6</option>
<option>9</option>
</select>
<div id="container"></div>
</div>
How can I reset the contents before adding the other contents?
you see on change iam removing everything inside container then goes your logic
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
container.innerHTML = "";
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content'); container.appendChild(content);
}
}
You can reset container by setting its innerHTML to empty string.
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
// reset
container.innerHTML = "";
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content');
container.appendChild(content);
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.app {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 12% 88%;
background: #5F9EA0;
}
select {
width: 60px;
height: 40px;
background: red;
color: #fff;
font-size: 24px;
border-radius: 10px;
outline: none;
}
#container {
width: 100%;
height: 100%;
background: darkcyan;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
width: 150px;
height: 150px;
border-radius: 15px;
background: darkgreen;
margin: 10px;
}
<div class="app">
<select>
<option>0</option>
<option>3</option>
<option>6</option>
<option>9</option>
</select>
<div id="container"></div>
</div>
You could do something like this:
check if the current select.value is less or equal the original squares if true, you remove all of them and then add the new squares according to the number selected
const addSquares = select => {
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement("div")
content.classList.add("content")
container.appendChild(content)
}
}
const select = document.getElementsByTagName("select")[0]
const container = document.getElementById("container")
select.onchange = () => {
const squares = document.querySelectorAll(".content")
const squareArr = Array.from(squares)
const { value } = select
if (value <= squareArr.length) {
squareArr.forEach(function (node) {
node.parentNode.removeChild(node)
})
}
addSquares(select)
}
I think this is the most convenient way.
Each time you click the button, you need to clear the previous time
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
container.innerHTML = '';
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content');
container.appendChild(content);
}
}
I'm trying to dynamically make all borders disappear except the newest created container's border I have tried the commented out section of the JavaScript. Can someone please provide an explanation/example of how this can be done?
function countButtonLinks() {
var elementGroups = document.getElementById('containsAll');
if(elementGroups.children.length == 0) {
var numID = 1;
}
if(elementGroups.children.length == 1) {
var numID = 2;
}
if(elementGroups.children.length == 2) {
var numID = 3;
}
if(elementGroups.children.length == 3) {
var numID = 4;
}
if(elementGroups.children.length == 4) {
var numID = 5;
}
if(elementGroups.children.length == 5) {
var numID = 6;
}
return numID;
}
function createContainer() {
if(document.getElementById('containsAll').children.length < 6) {
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
document.getElementById('containsAll').appendChild(elementA);
}
}
.containsAll {
width: 91%;
height: 75%;
position: absolute;
float: left;
margin-top: 1%;
margin-left: 1%;
background-color: transparent;
z-index: 91;
border: 1px #000000 solid;
border-radius: 7px;
padding: 5px;
}
.elem1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
border: 1px #333333 solid;
border-radius: 5px;
}
.elemInner1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
padding: 5px;
}
.buttonClass {
width: 100px;
height: 50px;
}
<button class="buttonClass" type="button" onclick="createContainer();">Click Me</button>
<div id="containsAll" class="containsAll"></div>
Please, no JQuery.
function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
// you don't need to use 'var numID'
return elementGroups.children.length + 1;
}
function createContainer(){
if(document.getElementById('containsAll').children.length < 6){
// add code here
for(var i=0;i<document.getElementById('containsAll').children.length;i++){
document.getElementById('containsAll').children[i].style.border = '0 none';
}
var elementA = document.createElement("span");
//...
Simply call the existing children of the element and remove the border before inserting
another element:
function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
var groupLength = elementGroups.children.length;
return groupLength++;
}
function createContainer() {
var containsAll = document.getElementById('containsAll'),
childrenLength = containsAll.children.length;
if (childrenLength >= 6) {
return; // Bail immediately since we only need to add a new element if the children's length is less than 6
}
// Call previous children
for ( var i = 0; i < childrenLength; i++ ) {
let child = containsAll.children[i];
// You can add a new class here that will remove the border
// but in this example, we'll use the style attribute to remove the border
child.style.border = 0;
}
// Now, add the new element
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
containsAll.appendChild(elementA);
}
Also, if you're going to use an element multiple times inside a function, make it a habit to store that element in a variable so you don't repeatedly calls the document.getElementById function.
You can accomplish this using the CSS :last-child selector
var container = document.getElementById('container');
function count_button_links()
{
return container.children.length + 1;
}
function new_container()
{
if (count_button_links() > 6) return false;
let span = document.createElement('span');
span.id = 'el_' + count_button_links();
span.className = 'box';
container.appendChild(span);
}
#container {
width: 100%;
background-color: transparent;
border: 1px solid #000;
border-radius: 7px;
padding: 5px;
display:flex;
height:200px;
}
.box {
flex:0 0 100px;
height:60px;
background-color: transparent;
border-radius: 5px;
}
.box:last-child{
border:1px solid #333;
}
button {
width: 100px;
height: 50px;
}
<button type="button" onclick="new_container();">Click Me</button>
<div id="container"></div>
I have five divs. Four of those divs you can click, which will run a function that moves the div you clicked on to the coordinate of the fifth div using div.offsetLeft and div.offsetTop. The first three divs all work fine, but if you click the right most div first, the transition effect isn't applied while moving to the coordinates. If you click any of the other divs first, and then the right most div, the transition will apply.
If you make it so there are only two or three divs, the problem still persists. (You must remove the corresponding id from the parties array, as well as the html element).
jsfiddle: https://jsfiddle.net/zjystr2u/
Apologies for the javascript in the html. Have never used jsfiddle, and couldn't figure out how to make it load the javascript after the html.
Something janky is going on when you getCurrentPosAll() changes position from the default static to absolute
You could run getCurrentPosAll() before changing the top and left to set their default values correctly.
var selected = document.getElementById("selected");
var selectedX = selected.offsetLeft;
var selectedY = selected.offsetTop;
parties = ['opt1', 'opt2', 'opt3', 'opt4'];
getCurrentPosAll(); // (NEW) Make sure their defaults are set.
function moreTest(e) {
var party = e.target
party.style.left = selectedX + "px";
party.style.top = selectedY + "px";
}
function getCurrentPosAll() {
for (var idx = 0; idx < parties.length; idx++) {
var currentDiv = document.getElementById(parties[idx]);
var x = currentDiv.offsetLeft;
var y = currentDiv.offsetTop;
currentDiv.style.left = x + "px";
currentDiv.style.top = y + "px";
}
for (var idx = 0; idx < parties.length; idx++) {
var currentDiv = document.getElementById(parties[idx]);
currentDiv.style.position = "absolute";
}
}
.wrapper {
display: flex;
justify-content: space-around;
width: 75%;
margin: 0 auto;
}
.selected {
width: 100px;
height: 150px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: black;
opacity: 0.6;
z-index: 1;
}
.opt {
width: 100px;
height: 150px;
cursor: pointer;
transition: top 0.7s, left 0.7s;
}
.opt1 {
background-color: red;
}
.opt2 {
background-color: blue;
}
.opt3 {
background-color: orange;
}
.opt4 {
background-color: green;
}
<div class="wrapper">
<div class="selected" id="selected"></div>
<div class="opt opt1" id="opt1" onclick="moreTest(event)"></div>
<div class="opt opt2" id="opt2" onclick="moreTest(event)"></div>
<div class="opt opt3" id="opt3" onclick="moreTest(event)"></div>
<div class="opt opt4" id="opt4" onclick="moreTest(event)"></div>
</div>
I'm not sure why it behaves like this. I figure it has to do with how and when the browser calculates the initial value for the transition. where last elements CSS changes get batched into 1 update.
therefor it will immediately receive the updated top and left values, whereas the other elements will receive 2 updates, one with the default top and left and then one with the updated values. causing their transition to work properly.
Most likely because the the last elements CSS is changed, their css updates are applied in 2 updates instead of 1.
var selected = document.getElementById("selected");
var selectedX = selected.offsetLeft;
var selectedY = selected.offsetTop;
parties = ['opt1', 'opt2', 'opt3', 'opt4', 'opt5','opt6'];
function moreTest(e) {
var party = e.target
getCurrentPosAll();
party.style.left = selectedX + "px";
party.style.top = selectedY + "px";
}
function getCurrentPosAll() {
for (var idx = 0; idx < parties.length; idx++) {
var currentDiv = document.getElementById(parties[idx]);
var x = currentDiv.offsetLeft;
var y = currentDiv.offsetTop;
currentDiv.style.left = x + "px";
currentDiv.style.top = y + "px";
}
for (var idx = 0; idx < parties.length; idx++) {
var currentDiv = document.getElementById(parties[idx]);
currentDiv.style.position = "absolute";
}
}
.wrapper {
display: flex;
justify-content: space-around;
width: 100%;
margin: 0 auto;
}
.selected {
width: 100px;
height: 150px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: black;
opacity: 0.6;
z-index: 1;
}
.opt {
width: 100px;
height: 150px;
cursor: pointer;
transition: 0.7s;
}
.opt1 {
background-color: red;
}
.opt2 {
background-color: blue;
}
.opt3 {
background-color: orange;
}
.opt4 {
background-color: green;
}
.opt5 {
background-color: violet;
}
.opt6 {
background-color: black;
}
<div class="wrapper">
<div class="selected" id="selected"></div>
<div class="opt opt1" id="opt1" onclick="moreTest(event)"></div>
<div class="opt opt2" id="opt2" onclick="moreTest(event)"></div>
<div class="opt opt3" id="opt3" onclick="moreTest(event)"></div>
<div class="opt opt4" id="opt4" onclick="moreTest(event)"></div>
<div class="opt opt5" id="opt5" onclick="moreTest(event)"></div>
<div class="opt opt6" id="opt6" onclick="moreTest(event)"></div>
</div>
there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO