The input number field doesn't render properly on ios. The number gets cut off at the bottom. It works for certain ios versions but not other ones. I'm stuck, please help
input[type=submit] {
text-align: center;
}
.page_q3 input[type="number"] {
height: 91px;
width: 110px;
color: #464356;
font-family: "Source Sans Pro";
font-size: 82px;
font-weight: 600;
text-align: center;
border: none;
border-bottom: 2px solid #464356;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<div class="page_q3">
<div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>
<div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>
<div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>
What it should look like
https://ibb.co/y8msSpL
what it actually looks like
https://ibb.co/rkbyPF5
You might want to try removing the border-radius and padding that are added by iOS by default:
.page_q3 input[type="number"] {
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
}
Related
I have mvc .net core project in bootstrap 4, as you can see the image functionality is working fine however there is no drag and drop functionality in the center, if I try to drag the image on "Choose file" it works but not in the center so could you please help me with just drag and drop functionality.
I don't want the code to upload and the image should not be uploaded to the server side, also need to ensure that there is close button on the right hand side which should remain intact.
JavaScript
$('.img-wrap .close').on('click', function () {
var id = $(this).closest('.img-wrap').find('imgInp').data('id');
$('#imgInp').attr('src', '');
$("#file").val('');
});
CSS
.imgdrop {
height: 30px;
}
.img-wrap {
position: relative;
display: inline-block;
border: 1px red solid;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #FFF;
padding: 5px 2px 2px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: .2;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
}
HTML
#Html.Label("Image"#*, new { #class = "control-label col-md-2"}*#)
<div class="col-md-3">
<input type="file" id="file" name="file" class=" imgdrop" multiple="multiple" />
<div class="img-wrap">
<span class="close">×</span>
<img src="#" alt="Alternate Image" id="imgInp" width="200" height="200" />
</div>
</div>
So when I am looking at my app on android phones and in the browser, the header (and sub header) looks like the following
When I am running on iOS emulator, or deploying to iOS phone, it looks like the following:
The markup looks like the following
<ion-header-bar class="bar item-input-inset search">
<div class="buttons buttons-left header-item">
<span class="left-buttons">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</span>
</div>
<label class="item-input-wrapper search">
<input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
</label>
<button class="button button-clear" ng-click="clearSearch()">
<i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
</button>
</ion-header-bar>
<ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
<button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
style="color:#fff;"
class="button button-clear col col-33"
ng-click="quickSearch('featured',model.searchTerm)">
FEATURED
</button>
<button class="button button-clear col col-33"
ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
style="color:#fff;"
ng-click="quickSearch('nearby',model.searchTerm)">
NEARBY
</button>
<button class="button button-clear col col-33"
style="color:#fff;"
ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
ng-click="quickSearch('recent',model.searchTerm)">
RECENT
</button>
</ion-header-bar>
The CSS I have is the following:
.action-sub-header {
background-color: #007fff;
}
.item-input-inset {
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;
position: relative;
overflow: hidden;
padding: 10.66667px;
}
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
.bar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid #ddd;
background-color: white;
/* border-width: 1px will actually create 2 device pixels on retina; */
background-size: 0;
}
The ion-header-bar has a specific css on ios to add space on top of it for the iOS statusbar. You have to override it in your case.
To test the ios specific css in your browser, edit the classes on the body tag. Replace platform-browser by platform-ios and platform-macintel or platform-windows by paltform-cordova.
When you have do that, you'll be able to see the specific style applied by the ionic css:
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px;
}
You just need to override it.
You need to add ionic.Platform.fullScreen(); to your $ionicPlatform.ready function.
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
I made a simple flippable element using common techniques and found some strange behavior in Mobile Safari on iOS 7 (older version also may be affected, unfortunately I can't test them at the moment older versions also seem to be affected), please see the images below or visit a demo directly on your iOS device.
Editable markup and stylesheet
Full screen view to visit on your iOS device
<div class="flippable">
<input id="flippable-trigger" type="checkbox">
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-front">
Front
</div>
<div class="flippable-face-back">
Back
</div>
</label>
</div>
body {
font: 1em/0 Arial;
background-color: silver;
}
.flippable {
position: relative;
float: left;
width: 10rem;
height: 10rem;
-webkit-perspective: 800;
}
.flippable input[type="checkbox"] {
display: none;
}
.flippable-faces,
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
}
.flippable-faces {
-webkit-transform-style: preserve-3d;
-webkit-transition: 600ms;
}
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
line-height: 10rem;
text-align: center;
-webkit-box-shadow: 0 0 1rem gray;
-webkit-backface-visibility: hidden;
}
.flippable-face-front {
color: black;
background-color: white;
}
.flippable-face-back {
color: white;
background-color: black;
-webkit-transform: rotateY(180deg);
}
.flippable input[type="checkbox"]:checked ~ .flippable-faces {
-webkit-transform: rotateY(180deg);
}
It appears that repositioning your divs fixes the issue. I don't have an answer as to why that was happening though. Sorry. Working Example | Example for iPhone
<div class="flippable">
<input id="flippable-trigger" type="checkbox" >
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-back">
Back
</div>
<div class="flippable-face-front">
Front
</div>
</label>
</input>
</div>
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.