In our HTML chat application, the user should have the opportunity to go in fullscreen mode to hide the navigation bar and get a better user experience. We have a simple layout:
<div id="chat">
<div id="header"></div>
<div id="messages"></div>
<div id="write">
<input type="text" placeholder="Your message..."/>
</div>
</div>
Our layout is a flex layout:
#chat {
display: flex;
flex-direction: column;
}
#header {
height: 60px;
}
#messages {
flex: 2;
}
#write {
height: 60px;
}
If we go to fullscreen and click on the text input field, the keyboard opens and overlays most of the content. So the user can't see the words he is typing in. Without fullscreen mode, everything is working fine.
We request fullscreen on the "body" element:
$("body").requestFullscreen();
Is there any workaround/fix for this issue?
Related
I try to let a menu bar within a header stay sticky. The header is a flexbox with vertical align (flex-direction: column). But as you may guess, it does not work.
simplified arrangement
here
HTML
<header>
<div id="quality-logos">
[some images here]
</div>
<div id="logo_motte_top">
[a big logo here]
</div>
<div id="navigation-wrapper">
<div id="navigation">
[some navigation code here]
</div>
<div id="menu_promo_text">
<div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
</div>
</div>
</header>
CSS (shortened)
header{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
div#navigation-wrapper{
position:sticky;
top:0;
}
You can see it live at motteduesseldorf.de
For your website's link, your <header> is a child of another div called #wrapper. position: sticky is probably being applied but it is not visible because the entire <header> div is not in view. Put another way, position: sticky works only "until" its immediate parent.
One way to fix your issue would be to move <div id="navigation-wrapper"> outside of <header> and make it an immediate child of the <div id="wrapper">.
While I am open to any solution, counting tables, Bootstrap and Flexbox, a purely CSS solution using just div elements is greatly appreciated.
HTML
<div class="sentence-summary">
<div class="stat bookmarked">
<i class="fas fa-bookmark"></i>
<span class="count">999</span>
</div>
<div class="stat upvotes">
<i class="fas fa-thumbs-up"></i>
<span class="count">999</span>
</div>
<div class="stat downvotes">
<i class="fas fa-thumbs-down"></i>
<span class="count">999</span>
</div>
<div class="main">
<p>{{ $sentence->body }}</p>
</div>
</div>
SCSS
.sentence-summary {
div {
display: inline-block;
}
.stat {
width: 40px;
text-align: center;
span {
display: block;
font-size: 10px;
}
&.bookmarked {
background-color: red;
}
&.upvotes {
background-color: blue;
}
&.stat.downvotes {
background-color: pink;
}
}
.main {
background-color: green;
}
}
Current Result
Desired Result
I would recommend using a grid layout for this. You can specify that the first three columns (stats) should be 40px wide. And then use '1fr' to say that the 'main' sections should take up the remaining space. Using a grid means that the heights will stay the same.
You can use 'grid-column-gap' to specify the amount of space you would like between each column. Something like this:
.sentence-summary {
display: grid;
grid-template-columns: 40px 40px 40px 1fr;
column-gap: 5px;
grid-auto-rows: 40px;
}
Make sure you use the appropriate browser prefixes as this syntax isn't supported by all browsers. I usually use this auto-prefixer.
Update: Adding grid-auto-rows: 40px; makes sure your 'stats' stay square!
I want to show 3 column masonry image grid on Desktop and single column on device. Following plunk works on mobile but it fails on Desktop (lot of gap between two images). I have tried setting width in percent but no luck
https://plnkr.co/edit/g75ClJU4VJWgJbfiKYdu?p=preview
.block{
float: left;
margin: 2px 2px 2px 2px;
width: calc(33.33% - 17px);
}
.block img {
width: 100%;
height: auto;
}
#media only screen and (max-width: 500px) {
.block {
float: left;
margin-bottom: 25px;
width: calc(100% - 17px);
}
}
Thanks in advance
MSK
You will probably want to only make use of media queries and remove float.
The design below is very flexible and allows for
One column on mobile screens
Two columns on tablet
Three columns on small desktop screens / laptops
Four columns on large desktops
Five columns on 4k screens.
The rest of the comments are inside the snippet.
body {
background: #131418;
}
/* Step 1: start with resetting some defaults */
* {
margin: 0 auto;
padding: 0;
max-width: 100%;
}
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
.grid {
text-align: center;
max-width: 95vw;
margin: 2.5vw auto;
}
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
.grid-item {
padding: 5px;
box-sizing: border-box;
}
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
#media (min-width: 500px) {
.grid-item {
width: 50%;
}
}
#media (min-width: 1000px) {
.grid-item {
width: 33.333%;
}
}
#media (min-width: 1700px) {
.grid-item {
width: 25%;
}
}
#media (min-width: 2100px) {
.grid-item {
width: 20%;
}
}
<!-- Made possible by the great work of David DeSandro # https://masonry.desandro.com -->
<!-- Part 1: Add the scripts -->
<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<!-- Step 3: we load masonry -->
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<!-- Part 2: Create the grid -->
<!-- Step 1: Start with a the main grid wrapper-->
<div class="grid">
<!-- Step 2: Add grid items--->
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
</div>
<!-- Step 3: repeat...--->
<div class="grid-item">
<img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
</div>
<div class="grid-item">
<img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
</div>
<div class="grid-item">
<img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
</div>
<div class="grid-item">
<img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
</div>
<div class="grid-item">
<img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
</div>
</div>
<!-- Part 3: the script call -->
<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. -->
<script>
var $grid = $(".grid").imagesLoaded(function() {
$grid.masonry({
itemSelector: ".grid-item"
});
});
</script>
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
Is there some easy way to align stuff in div containers to the right or bottom:
<div class="span-24 align-right last">Text appears on the right side of the layout</div>
or:
<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div>
or:
<div class="span-24 vertical-middle last">Middle of the container</div>
Here's a sample of what I'm working with trying to position the "topnav" below:
<div class="container">
<div class="span-16">
<h1>Header</h1>
</div>
<div class="span-8 last vertical-middle">
<div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div>
</div>
<hr />
...
</div>
Use position: absolute. For example:
.align-right {
position: absolute;
right: 0;
}
/* Or, alternatively, */
.align-right {
float: right;
}
.bottom {
position: absolute;
bottom: 0;
}
.vertical-middle {
position: absolute;
top: 50%;
}
Note that for vertical-middle, this will center the top edge of the content, no the content itself.
Make sure that the containing DIV is position: relative to force it to become the offset parent (which the position of the children are relative to) EDIT: In other words, add the following rule:
.container {
position: relative;
}