How to embed Yandex.Maps on flexbox?
I tried to do it , but if you change the browser window width -- width of the map increases ( it appears the horizontal scrolling).
https://jsfiddle.net/khusamov/91ownd3j/31/
html {
width: 100%;
height: 100%;
display: flex;
}
body {
padding: 0;
margin: 0;
display: flex;
flex: 1 1 0;
}
#map-wrap {
display: flex;
flex: 1 1 0;
}
#map-block {
display: flex;
flex: 1 1 0;
}
#map-settings {
width: 300px;
}
#map {
width: 100%;
height: 100%;
}
https://jsfiddle.net/khusamov/91ownd3j/43/
html {
width: 100%;
height: 100%;
display: flex;
}
body {
padding: 0;
margin: 0;
display: flex;
flex: 1 1 0;
}
#map-wrap {
display: flex;
flex: 1 1 0;
}
#map-block {
flex: 1 1 0;
position: relative;
}
#map-settings {
width: 300px;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
Related
I read several places that its a CSS issue but I can't figure out how to fix it.
When a user types information into the website, it does not display any text but the cursor moves as if text was typed.
CSS file
*:focus,
*:hover,
*:active {
outline: none;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
color: #6a6f8c;
background: #fafafa;
font: 600 16px/18px 'Open Sans', sans-serif;
height: auto;
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
a {
color: inherit;
text-decoration: none
}
.login-wrap {
width: 100%;
margin: auto;
max-width: 525px;
min-height: 1070px;
position: relative;
background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
background-size: cover;
}
.login-html {
width: 100%;
height: 100%;
position: absolute;
padding: 90px 70px 50px 70px;
background: rgba(40, 57, 101, .9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
text-transform: uppercase;
}
.login-html .tab {
font-size: 22px;
margin-right: 15px;
padding-bottom: 5px;
margin: 0 15px 10px 0;
display: inline-block;
border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked+.tab,
.login-html .sign-up:checked+.tab {
color: #fff;
border-color: #1161ee;
}
.login-form {
min-height: 345px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.login-form .group {
margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
width: 100%;
color: #fff;
display: block;
}
.login-form .group .input,
.login-form .group .button {
border: none;
padding: 15px 20px;
border-radius: 25px;
background: rgba(255, 255, 255, .1);
}
.login-form .group input[data-type="password"] {
text-security: circle;
-webkit-text-security: circle;
}
.login-form .group .label {
color: #aaa;
font-size: 12px;
}
.login-form .group .button {
background: #1161ee;
}
.login-form .group label .icon {
width: 15px;
height: 15px;
border-radius: 2px;
position: relative;
display: inline-block;
background: rgba(255, 255, 255, .1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
content: '';
width: 10px;
height: 2px;
background: #fff;
position: absolute;
-webkit-transition: all .2s ease-in-out 0s;
transition: all .2s ease-in-out 0s;
}
.login-form .group label .icon:before {
left: 3px;
width: 5px;
bottom: 6px;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
top: 6px;
right: 0;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group .check:checked+label {
color: #fff;
}
.login-form .group .check:checked+label .icon {
background: #1161ee;
}
.login-form .group .check:checked+label .icon:before {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked+label .icon:after {
-webkit-transform: scale(1) rotate(-45deg);
transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked+.tab+.sign-up+.tab+.login-form .sign-in-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.login-html .sign-up:checked+.tab+.login-form .sign-up-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.hr {
height: 2px;
margin: 60px 0 50px 0;
background: rgba(255, 255, 255, .2);
}
.foot-lnk {
text-align: center;
}
.fullwidth {
width: 100%;
}
.fulheight {
height: 100%;
}
.main {
background: #fafafa;
padding: 15px;
}
.btn__grp button:last-child {
margin-right: 15px;
}
.blank_input_hack {
height: 0;
width: 0;
opacity: 0;
}
.input option {
color: black;
}
#promoForm {
max-width: 600px;
margin: 0 auto;
}
/*.tooltip.ng-scope.ng-isolate-scope.top.fade.in{
word-break: break-word;
}*/
.color-box>div {
display: inline-block;
margin-bottom: 15px;
}
.color-box>div:not(:last-child) {
margin-right: 3px;
}
.color-box>div label {
margin: 0;
padding: 3px;
border: solid 1px #979797;
}
.btn.pull-right {
margin-right: 10px;
}
#user {
text-transform: lowercase;
}
input,
textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
table tr th {
background: #337ab7;
color: white;
text-align: left;
vertical-align: center;
}
The website is https://braindrain.developmentserver.me
I think I have found the solution. Nice tip if you didn't know this, you can plug your iPhone into a Mac via usb and use the web inspector remotely. I found that you have a div before the username input form with the class blank_input_hack. Once I removed this, then the input works flawlessly, styled and all. Not sure why this was there in the first place, but there you go! Hope this helps!
This code works as expected on computer but totally fails to render the display: flex on both Chrome 47 for iPad and Safari for iPad (in landscape view, width 1024px).
It's strange because flex should be well supported on Chrome since a long time.
* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { flex: 1; background-color: yellow; }
<div id="header">
<div id="topleft">Topleft</div>
<div id="topmid">Topmid</div>
<div id="topright">Topright</div>
</div>
What's wrong?
If your iPad isn't running iOS 9, you need to add -webkit-flex: 0 0 155px; to #topleft, -webkit-flex: 0 0 40%; to #topmid, and -webkit-flex: 1; to #topright.
Making an assumption based on your inclusion of display: -webkit-flex;
So, your new CSS might look like:
* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }
Also, Chrome on iPad is still using the Safari engine... it's just a webview, so we don't get all the up to date Chrome goodness we get on android devices.
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 developing a mobile application with cordova for, amongst others, IOS. In this application I'm using the HTML5 video player, but on my iPhone as well as my iPad the controls are situated OVER the play button. I can still press the play button, but seeking is harder than normal, and it just looks weird.
Does anybody have an idea on why this is and what I can do to solve this? Thanks.
Edit lib/ionic/css/ionic.css and remove/comment out the conflicting style attributes for input[range] Keep in mind that you will have to replicate the change in ionic.min.css for prod builds and/or if you update the ionic framework. Obviously you will have to come up with something less blunt if you are using or planning on using the Ionic framework's range input control styles.
ionic.css
/**
* Range
* --------------------------------------------------
*/
/*input[type="range"] {
display: inline-block;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 2px;
padding-left: 1px;
width: auto;
height: 43px;
outline: none;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc));
background: linear-gradient(to right, #ccc 0%, #ccc 100%);
background-position: center;
background-size: 99% 2px;
background-repeat: no-repeat;
-webkit-appearance: none; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-appearance: none;
border: 0; }
input[type="range"]::-webkit-slider-thumb:before {
position: absolute;
top: 13px;
left: -2001px;
width: 2000px;
height: 2px;
background: #444;
content: ' '; }
input[type="range"]::-webkit-slider-thumb:after {
position: absolute;
top: -15px;
left: -15px;
padding: 30px;
content: ' '; }
.range {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 2px 11px; }
.range.range-light input::-webkit-slider-thumb:before {
background: #ddd; }
.range.range-stable input::-webkit-slider-thumb:before {
background: #b2b2b2; }
.range.range-positive input::-webkit-slider-thumb:before {
background: #387ef5; }
.range.range-calm input::-webkit-slider-thumb:before {
background: #11c1f3; }
.range.range-balanced input::-webkit-slider-thumb:before {
background: #33cd5f; }
.range.range-assertive input::-webkit-slider-thumb:before {
background: #ef473a; }
.range.range-energized input::-webkit-slider-thumb:before {
background: #ffc900; }
.range.range-royal input::-webkit-slider-thumb:before {
background: #886aea; }
.range.range-dark input::-webkit-slider-thumb:before {
background: #444; }
.range .icon {
-webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
display: block;
min-width: 24px;
text-align: center;
font-size: 24px; }
.range input {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
margin-right: 10px;
margin-left: 10px; }
.range-label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
white-space: nowrap; }
.range-label:first-child {
padding-left: 5px; }
.range input + .range-label {
padding-right: 5px;
padding-left: 0; }
*/
I've created grid in MVC5 like
.
But I want a vertical line as a column separator like
I'm using grid.mvc (version: 3.0.0) of nugget package and default bootstrap for VS2013(MVC5).
Here is my Gridmvc.css
/***
* Grid.Mvc stylesheet http://gridmvc.codeplex.com/
* This file contains default styles for Grid.Mvc.
*/
/* Grid */
table.grid-table { margin: 0; }
table.grid-table .grid-wrap { padding: 0; position: relative; }
table.grid-table .grid-empty-text { color: #666; }
/* Grid headers */
table.grid-table .grid-header { position: relative; }
table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after { content: " \2193"; }
table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after { content: " \2191"; }
table.grid-table .grid-header > .grid-header-title { border: #999999 1px solid;height: 21px;background-color: #f0f0f0;text-overflow: ellipsis;overflow: hidden; }
/* Grid body */
/*table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; }*/
table.grid-table tr.grid-row-selected td { margin-bottom: 1px; padding-top: 0px; border: #000000 1px solid; height: 21px; }
/*table.grid-table tr.grid-row-selected a { color: white; }*/
table.grid-table tr.grid-row-selected a { margin-bottom: 1px; color: #000000; padding-top: 1px; border: #c4ddff 1px solid; height: 21px; background-color: #a7cdf0; }
/* Grid filtering */
input.grid-filter-input { padding: 4px; font-size: 13px; }
table.grid-table .grid-filter { position: relative; margin-top: 2px; float: right; width: 10px; height: 12px; }
table.grid-table .grid-filter-btn { cursor: pointer; display: block; width: 10px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat; }
table.grid-table .grid-filter-btn.filtered { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat; }
table.grid-table .grid-filter-buttons { padding: 0; }
table.grid-table .grid-filter-datepicker { font-size: 12px; }
table.grid-table .grid-filter-datepicker table td { padding: 1px!important; }
table.grid-table .grid-filter-datepicker .ui-datepicker { width: auto; }
table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear { white-space: nowrap; padding-left: 23px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='); background-position: 3px center; background-repeat: no-repeat; }
table.grid-table .grid-filter-choose.choose-selected { background-color: white!important; cursor: default; color: #999; }
table.grid-table .grid-popup-additional { padding: 3px 0 0 0; }
/* POP-UP */
.grid-dropdown { font-weight: normal; left: -102px; top: 16px!important; min-width: 180px; }
.grid-dropdown-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat; height: 8px; left: 99px; position: absolute; top: -8px; width: 14px; }
.grid-dropdown-inner { padding: 5px 7px; }
.grid-dropdown ul.menu-list { list-style-type: none; margin: 3px 0 0 0; padding: 0; }
.grid-dropdown ul.menu-list li a { text-decoration: none; background-position: 6px center; background-repeat: no-repeat; display: block; padding: 4px 5px; }
.grid-dropdown ul.menu-list li a:hover { background-color: #EEE; text-decoration: none; }
Added these two lines under GridBody in Gridmvc.css :
table.grid-table tr td {border-right: solid 1px #666;}
table.grid-table tr a {border-right: solid 1px #666;}
To add a right border to your table you need to apply it to your table headings and table data tags
Add this to your CSS and place it after the gridmvc.css.
td, th {
border-right: 4px solid black;
}
Hope this helps