I'm making a checkbox drawing program, where the user can draw pictures with checkboxes. I need to disable automatic line breaks on the checkboxes, because they go off the end of the line and mess the square up. For example, here is what happens if I try to draw an 100*100 square:
Obviously, this is not what I want. How can I disable the automatic line break when the screen runs out of space so the horizontal scroll bar appears?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
.drawcheck
{
display:inline-block;
vertical-align:top;
}
</style>
<script type = "text/javascript">
function drawBoxes()
{
var html = "";
for(var i = 0;i<100;i++)
{
for(var j = 0;j<100;j++)
{
html += "<input type = 'checkbox' class = 'drawcheck'>";
}
html += "<br />";
}
document.getElementById('drawarea').innerHTML = html;
}
function clearAll()
{
var w = document.getElementsByTagName('input');
for(var i = 0; i < w.length; i++){
if(w[i].type=='checkbox'){
w[i].checked = false;
}
}
}
</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><input type = "button" onclick = "clearAll()" value = "Clear"/></div>
<div id ="drawarea" style = "text-align:center"></div>
</body>
</html>
I'm making a checkbox drawing program, where the user can draw pictures with checkboxes. I need to disable automatic line breaks on the checkboxes, because they go off the end of the line and mess the square up. For example, here is what happens if I try to draw an 100*100 square:
Obviously, this is not what I want. How can I disable the automatic line break when the screen runs out of space so the horizontal scroll bar appears?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
.drawcheck
{
display:inline-block;
vertical-align:top;
}
</style>
<script type = "text/javascript">
function drawBoxes()
{
var html = "";
for(var i = 0;i<100;i++)
{
for(var j = 0;j<100;j++)
{
html += "<input type = 'checkbox' class = 'drawcheck'>";
}
html += "<br />";
}
document.getElementById('drawarea').innerHTML = html;
}
function clearAll()
{
var w = document.getElementsByTagName('input');
for(var i = 0; i < w.length; i++){
if(w[i].type=='checkbox'){
w[i].checked = false;
}
}
}
</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><input type = "button" onclick = "clearAll()" value = "Clear"/></div>
<div id ="drawarea" style = "text-align:center"></div>
</body>
</html>
- On the container add css overflow-x: scroll; – Daniel Commented Aug 22, 2013 at 20:53
- jsfiddle/L8eny Define a width on the container. – Daniel Commented Aug 22, 2013 at 20:59
2 Answers
Reset to default 7white-space: nowrap on the container element should do.
What you might want to do instead of using inline-blocks is display block and floating left:
.drawcheck {
float:left;
}
You may have to set a width for the checkboxes, though, so that they will clear in the right spots.