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>
Related
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
I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u
body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
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