I am trying to achieve CSS only scroll-snap behaviour in an app but see that it doesn't work as expected in iOS. Here is link to CodePen that demo the case.
The code is enclosed below
body, html {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.panel-container {
width: 100%;
height: 50%;
border: 2px solid lightgray;
box-sizing: content-box;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-destination: 0 0;
}
.panel {
scroll-snap-align: start;
border: 2px solid;
box-sizing: border-box;
min-width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.one {
border-color: red;
}
.two {
border-color: blue;
}
<div class="panel-container">
<div class="panel one">
One
</div>
<div class="panel two">
Two
</div>
</div>
I included a few redundant CSS rules that I've learned in corresponding MDN page, nut I also tried without them with no luck.
I suspect that there the issue is caused because of combination of flex and scroll-snap but I'm not sure that it is the case.
PS: There are a few threads in SO discussing scroll-snap issues. One of them combines JS + CSS which is not exactly what I'm trying to do.
The container needs -webkit-overflow-scrolling: touch and the children overflow:visible (which they already have in your case).
Related
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
I have a model that called LinksListWidgetModel that contains an IEnumerable property named Links that contains a list of my website links.
In my Razor view, I have two columns (i.e. one for the grid "col-md-8" and one for another tool "col-md-4". I have a foreach loop that adds each link to the grid tool. I am trying to achieve the following look: Matrix View, however the buttons don't wrap after three, it just continues throughout the width of the page. I am using Bootstrap4.x and flexbox.
I tried following the example in this question: How I can make nice looking matrix of buttons with bootstrap 3?, but that didn't fix the issue either.
Here is my code:
LinksListGrid.cshtml:
#if (Model == null)
{
#Html.Partial("_WidgetNotConfigured") }
else
{
<div class="btn-group btn-matrix" role="group">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<button>
<a class="linkContainer-gridItem-link btn btn-default" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</button>
</div>
}
</div>
}
LinkContainer.scss:
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
font-weight: 400;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
width: 290px;
display: block;
margin: 0 auto;
padding: 0;
padding-bottom: 19px;
font-family: "Montserrat",sans-serif;
text-align: center;
.linkContainer-gridItem {
background-color: $colorBrandBlue;
border-radius: 25px;
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
vertical-align: top;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 20px 10px;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media screen and (max-width: 767px) {
&.linkContainer-gridLayout {
padding: 0;
}
}
}
.btn-matrix {
> .btn {
&:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
&:nth-child(n+4) {
margin-top: -1px;
}
&:first-child {
border-bottom-left-radius: 0;
}
&:nth-child(3) {
border-top-right-radius: 4px !important;
}
&:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
It ends up looking like this: Grid View
How can I change this to make it look like the first screenshot's matrix/grid display? After every 3 buttons it goes on the second line.
I don't think clear:left; will work on flexbox. But there are other ways to do it.
HTML & SCSS way
I think you would be better off just styling .btn-matrix yourself, without mixing .btn-group styles, because Bootstrap .btn-group brings in lots of noice on its .btn children, such as border-radius, border, etc. You would need to style them using your own styles anyway so why bother.
I think the following structure should be generic enough you can use to construct a matrix:
<div class="btn-matrix btn-matrix-white" role="group">
<a class="btn" href="#">
<div class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" />
<i class="fas fa-chart-bar fa-stack-1x" />
</div>
Reports
</a>
...
</div>
First of all, in your original HTML structure, you had a button that wraps an anchor link. That's not necessary because Bootstrap has classes to style an anchor link to just look like a button.
Secondly, I am using icon stacking method to construct icons with circle backgrounds. You can read about it here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Finally, here is the styles:
$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;
.btn-matrix {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 1rem #ccc;
border: 1px solid transparent;
border-radius: .25rem;
> .btn {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding: 5%;
width: calc(100% / #{$numOfMatrixItemPerRow});
border-radius: 0;
}
&.btn-matrix-white {
> .btn {
background-color: #fff;
border-right: $matrixItemBorderWidth solid #ddd;
border-bottom: $matrixItemBorderWidth solid #ddd;
.fa-stack-2x {
color: var(--primary);
}
.fa-stack-1x {
color: #fff;
}
&:nth-child(#{$numOfMatrixItemPerRow}n) {
border-right: none !important;
}
&:last-child {
border-bottom: none !important;
}
}
}
}
Really nothing tricky there except you would need to use SASS Interpolation to involve $numOfMatrixItemPerRow variable into calculations:
Display .btn-matrix as a wrappable flex row
Set the width of each button to be 100% / $numOfMatrixItemPerRow so that each row will contain the exact number of items before breaking into new rows
Display .btn as flexbox column so that you can easily align the icons and text there
Set the right and bottom border of each button, with exceptions of the last one on each row and last one
demo: https://jsfiddle.net/davidliang2008/1wqost69/201/
ASP.NET MVC way
Now since you're using ASP.NET MVC, I think there is another approach you can consider. That is, in the loop where you loop though each link from the model, you can define a variable there and do something like:
<div class="btn-matrix">
#for (int i = 0; i < Model.Links.Count(); i++)
{
var link = Model.Links[i];
if (i % numOfItemsPerRow == 0)
{
<div class="row">
}
<div class="col-md-4">
<a class="btn" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</div>
if ((i+1) % numOfItemsPerRow == 0 || i + 1 == Model.Links.Count())
{
</div>
}
}
</div>
I'm just making things up but hopefully you see where I am going.
I am using jquery-3.4.1.min.js and jquery-ui-1.12.1 .
I have a problem with jquery ui sortable widget.
When I try to drag "div.container", which is child of "div.containerList" (with applied sortable), I am not able to trigger dom change on whole height of sibling element, I have to adjust dragged element vertical position.
Can somebody please explain this behavior, possibly with solution?
Thank you very much!
https://jsfiddle.net/chada090/47ku2jer/
A added some modificaton to make it more "contrast" for each element.
HTML
<div class="containerList">
<div class="container"><span class="title">test kontejner</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container">
<span class="title">test kontejner1</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>
JS
$(".containerList").sortable({
// containment: "parent",
placeholder: "ui-state-highlight container",
change: function( event, ui ) {
console.log(ui);
}
}).disableSelection();
CSS
.containerList{
display: flex;
min-height: 600px;
}
.containerList .container{
display:inline;
margin-left: 15px;
margin-right: 15px;
flex: 0 0 300px;
min-height: 150px;
width: 300px;
display:flex;
flex-direction: column;
background: gray;
padding: 20px;
}
.container .title_newCont{
cursor: pointer;
color: blue;
}
.container .addTask{
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}
.container .taskList{
margin-top: 20px;
background: brown;
height: 20px;
}
.taskList > div{
background-color: white;
margin-top: 15px;
}
.taskList .taskItem{
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 40px;
display:flex;
align-items: center;
padding: 5px;
background: blue;
}
.taskNewItem > *{
padding: 3px;
background: green;
}
.taskNewItem input{
border: none;
outline: none;
background: red;
}
.addTask .switch{
text-align: center;
width: 100%;
background: yellow;
}
.taskNewItem{
display: flex;
flex-direction: column;
}
.taskNewItem input{
width: 100%;
}
.taskNewItem .taskButtonAdd{
width: 100%;
background-color: green;
flex:0 0 40px;
font-size: 15px;
border: none;
}
.ui-state-highlight{
background-color:blue !important;
}
after reading through API documentation, I found option "tolerance", which solved my problem.
tolerance Type: String Default: "intersect" Specifies which mode to
use for testing whether the item being moved is hovering over another
item. Possible values: "intersect": The item overlaps the other item
by at least 50%. "pointer": The mouse pointer overlaps the other item.
Code examples: Initialize the sortable with the tolerance option
specified:
1 2 3 $( ".selector" ).sortable({ tolerance: "pointer" });
I'm trying to enclose the datagrid inside of a custom component with three stacked divs, the one in the middle acting as a growing div. The middle div grows but the grid only shows the headers, no viewport, no rows.
<!DOCTYPE html>
<dom-module id="vertical-datagrid">
<template>
<style include="bwu-datagrid-default-theme">
:host {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: lightblue;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
overflow: hidden;
word-wrap: break-word;
width: auto;
height: 100%;
/*
height: calc(100% + 15px);
height: -moz-calc(100% + 15px);
height: -webkit-calc(100% + 15px);
*/
}
#myGrid {
--bwu-datagrid: {
width: auto;
height: 100%;
opacity: 1;
transition: opacity 200ms;
background: white;
outline: 0;
border: 1px solid gray;
};
}
#gridHeaderDiv {
padding: 0;
margin: 0;
width: auto;
height: 20px;
background-color: lightgoldenrodyellow;
}
#gridDiv {
width: 100%;
test-decoration: none;
overflow: hidden;
flex: 1 1 auto;
background-color: lightsalmon;
}
#footerDiv {
background-color: lightpink;
height: 20px;
width: 100%;
}
</style>
<div id="gridHeaderDiv">
Top Header
</div>
<div id="gridDiv">
<bwu-datagrid grid id="myGrid"
theme="bwu-datagrid-default-theme">
</bwu-datagrid>
</div>
<div id="footerDiv">
Footer
</div>
</template>
</dom-module>
</html>
This is how the grid looks:
I also added this for the resize, which works great:
dom.window.onResize.listen((dom.Event e) => grid.resizeCanvas(e));
The only way I've managed to get this working is by removing the "gridDiv" nesting and simply placing the grid in between the header/footer divs.
I'm trying to get a very simple layout using the flex model working on iPad.
I have a containing div that is supposed to center the content divs.
The sample code does as intended across all browsers and platforms EXCEPT on the iPad (retina).
Using various iPad emulators online will not replicate the problem. I've only been able to replicate it on the actual iPad. Here's a screenshot of what it looks like:
Any and all advice will be appreciated very much.
CSS:
.container {
width: 510px;
height: 310px;
background: red;
display: flex;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items:center;
border: 2px solid;
padding: 5px;
margin: 0;
}
.content {
float: left;
width: 150px;
height: 150px;
background: green;
border: 2px solid;
padding: 0;
margin: 0;
}
.content2 {
float: left;
width: 150px;
height: 150px;
background: blue;
border: 2px solid;
padding: 0;
margin: 0;
}
HTML:
<div class="container">
<div class="content">
<p>Content</p>
</div>
<div class="content2">
<p>Content2</p>
</div>
</div>
You're missing some properties from the old 2009 draft (or have them named wrong). Your container CSS should look like this:
http://cssdeck.com/labs/ci9imeed
.container {
width: 510px;
height: 310px;
background: red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border: 2px solid;
padding: 5px;
margin: 0;
}
Note, however, that none of the browsers with a 2009 Flexbox implementation (Android, older Safari, older Firefox) support wrapping.