The code below uses flex to display some divs that act as buttons: the point is to create a basic layout for simple games.
Two problems arises with this style of coding, first being speed of execution and second management of percentage of each container.
style apart, does do the trick on a laptop but it's unusable on mobile devices
what I'm missing? thanks in advance
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html, body{
width: 100%;
height: 100%;
}
.maincontent{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.columncontent{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
}
.item{
height: 100%;
}
.item:hover{
border : 12px solid white;
}
.a{
background: blue;
}
.b{
background: red;
}
.c{
background: black;
}
.d{
background: green;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
</div>
<script type="text/javascript">
var handle = function(el){
if(el.style.background=="green")
el.style.background="yellow";
else
el.style.background = "green";
}
</script>
</body>
</html>
I use SimpleHTTPServer to test over LAN. Testing mobile devices are running iOS and iPadOS only on Safari
Related
I just need put the box 7 below the box 6! But I can't...
All the code is below, to test in your machine please Include Bootstrap 4 from a CDN: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Ps: that is the desktop version, I don't need think about this layout in mobile version now.
Thank You!
.row {
background-color: yellow;
}
.row .row>div {
border:solid 1px black;
min-height:200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8" id="box6">box 6</div>
<div class="col-8" id="box7">box 7</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>
#box5.col-4 and #box6.col-8 Both elements have fully occupied a row so that #box7 pushed out below #box5.
Use another div.row for #box6 and #box7 inside div.col-8.
.row {
background-color: yellow;
}
.row .row>div {
border: solid 1px black;
min-height: 200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<div class="col-12" id="box7">box 7</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>
Here a simple solution to create that layout dynamicly with PHP.
You can use the same logic with another web language if you prefer.
<style>
.row {
border: solid 1px black;
min-height: 200px;
}
#box2 {
background-color: lightblue;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
.container {
background-color: lightgreen;
}
#footer {
background-color: orange;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<?php
$total = 6; //from 1 to 6
?>
<?php for ($i=1; $i <= $total; $i++) :
if ($i==1) :
?>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div id="box2" class="col-9">box 2</div>
</div>
</div>
<?php
endif;
if ($i==2) :
?>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<?php
endif;
if ($i==3) :
?>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<?php
endif;
if ($i==4) :
?>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<?php
endif;
if ($i==5) :
?>
<div class="col-12" id="box7">box 7</div>
</div>
<?php
endif;
if ($i==6) :
?>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>
<?php
endif;
endfor;
if ($total == 1) { echo '</div></div></div></div>'; }
if ($total == 2) { echo '</div></div></div></div></div></div>'; }
if ($total == 3) { echo '</div></div></div></div></div></div>'; }
if ($total == 4) { echo '</div></div></div></div></div></div></div></div>'; }
if ($total == 5) { echo '</div></div></div></div></div></div></div>'; }
?>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I can't figure out why flexbox children do not have equal height on iPad (Chrome and Safari). When testing this works fine on the desktop:
But this is how it looks on iPad:
HTML structure:
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
CSS:
.flex-grid-quarters, .flex-grid-thirds {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-grid-quarters .col {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 25%;
}
I don't believe it is necessary to have display: flex on the children, but I added that anyway in an attempt to get it working. No such luck (the result is exactly the same with or without that). The link to the site if anyone needs it is http://omclub.streeten.co.uk/ Any help much appreciated.
There's a ton of vendor prefixes that are no longer needed, so I removed everything but justify-content and display: flex; It looks like each flex-item has equal heights. Unfortunately I am not able to test it on an iPad (it's the only device I don't have yet)
SNIPPET
.flex-grid-quarters, .flex-grid-thirds {
display: flex;
justify-content: center;
}
.flex-grid-quarters .col {
width: 25%;
outline: 3px dashed red;
}
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
</body>
</html>
My question is: i have a container with masonry layout, is possible that one or more item have inside another container with masonry?
<div class="masonry">
<div class="item"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside"></div>
<div class="item_inside"></div>
<div class="item_inside"></div>
</div>
</div>
<div class="item"></div>
</div>
You will have to init Masonry seperately on each grid container:
// Init masonry on outer container
$('.masonry').masonry({
itemSelector: '.item',
});
// Init masonry on inner container
$('.masonry_inside').masonry({
// You need to use another item selector class on the inner elements
itemSelector: '.item_inside',
});
.masonry {
width: 440px;
background-color: gray;
}
.item {
width: 200px;
background-color: black;
margin: 10px;
}
.item_inside {
width: 80px;
margin: 10px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item" style="height: 150px;"></div>
<div class="item" style="height: 200px;"></div>
<div class="item" style="height: 180px;"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside" style="height: 180px;"></div>
<div class="item_inside" style="height: 80px;"></div>
<div class="item_inside" style="height: 120px;"></div>
<div class="item_inside" style="height: 35px;"></div>
</div>
</div>
<div class="item" style="height: 80px;"></div>
</div>
I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
#import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
The reload and F12 solution seems to indicate one of the following issues:
<link> or <style> tag for CSS outside of the <head>
document.write via a downloaded <script>
Asking for computed styles in related JavaScript code, via:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
Changing individual styles in related JavaScript code
Getting and setting styles in a loop
References
Rendering: repaint, reflow/relayout, restyle
Am working on a windows store javascript application. The application will be using data from azure. When I tried to port the azure connectivity sample to a navigation template, the list view displayed the entire columns from the table. I used the same data read code from the sample. The html page and css were identical to the sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--head segment-->
<title>QuickStart</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
<!-- QuickStart references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/pages/Advertisement/advertisement.js"></script>
<link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />
</head>
<body>
<!--body segment-->
<div style="margin: 50px 10px 10px 50px" id="overalldiv">
<div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">
<div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
<div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
<div style="color: #808080; font-size: 32pt">Sample</div>
</div>
<div style="-ms-grid-row: 2; -ms-grid-column: 1;">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1;" class="tasknumber">
1
</div>
<div style="-ms-grid-column: 2">
<strong>Insert a TodoItem</strong><br />
<span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
<input type="text" id="textInput" />
<button id="buttonSave" style="margin-left: 5px">Save</button>
</div>
</div>
<div style="-ms-grid-column: 2; -ms-grid-row: 2;">
<div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
<div style="-ms-grid-row: 1">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1; float: left;" class="tasknumber">
2
</div>
<div style="-ms-grid-column: 2">
<strong>Query and Update Data</strong><br />
<span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px">
<button id="buttonRefresh">Refresh</button>
</div>
</div>
</div>
<div id="TemplateItem" data-win-control="WinJS.Binding.Template">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
<div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">
</div>
</div>
</div>
<div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">
</div>
</div>
</div>
</div>
</body>
</html>
The actual sample project displayed only the text field from the azure database table as shown in the below diagram.
But in my case all the column fields are getting displayed
How am I supposed to display only the required content and how am I supposed to do the formatting for the listview contents. I wanted to display the contents in the following manner
1
ab
2
drag
3
dragon
4
arm
..
..
..
Have you set the itemTemplate for the ListView? You need to tell the ListView how to display each item of the itemDataSource