I have combed through compatibility issues on this site looking for fixes for this problem and I cannot seem to find any posts with quite the same issue as me.
Basically, when I load the app in chrome browser and inspect through all phone sizes, it is responsive and it works. However when I actually open the app web address in my personal iphone, the toggle menu does not work. It drops down behind the main content and is hardly clickable. Can anyone help?
Here is a link to the app:
https://evening-stream-86674.herokuapp.com/index.html
Here is the portion of the CSS file:
* {
box-sizing: border-box !important;
}
html {
height: 100%;
}
body {
background: url("../images/tree.png") no-repeat center center fixed;
background-size: cover;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
/*my favorite lime green color #47dd1b*/
li {
background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0 !important;
height: 8%;
}
#media only screen and (max-width: 640px) {
/* For mobile phones: */
li {
width: 100%;
}
.navbar {
width: 100%;
}
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">John Wolfe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>
About
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="wrap">
Edited to show less code.
Related
Navbar toggle button is coming in center on small screen. how can i move it to right??
i tried few ways but it is not working. However the navbar works fine on medium and large screens.
here is my code:
""
<!-- ========================= Theme Feature Page Menu ======================= -->
<nav class="navbar float-right navbar-expand-lg navbar-expand-md theme-main-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle float-xs-right collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menu</span>
Menu
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown-holder">ABOUT COLLEGE
<ul class="sub-menu">
<li>College Profile</li>
<li>Principals Message</li>
<li>Vision & Mission</li>
<li>Committee List</li>
<li>Photo Gallery</li>
</ul>
</li>
<li>CONTACT
</ul>
</div><!-- /.navbar-collapse -->
</nav> <!-- /.theme-feature-menu -->
</div>
</header> <!-- /.theme-main-header -->""
Within the desired CSS file of yours declare definition sizes and then use float: right;
Example:
#media (min-width: 576px) and (max-width: 767px) {
.navigation.navbar {
float: right;
display: inherit !important;
padding: 0;
width: 100%;
}
.navigation .navbar-collapse {
background: #fff;
padding: 20px;
margin-top: 56px;
position: absolute;
width: 100%;
margin-right: 20px;
z-index: 999;
}
.navigation.navbar-dark .navbar-nav .nav-link {
padding: 10px 0;
color: #000;
}
.navigation.navbar-dark .navbar-toggler {
border-color: #fff;
float: right;
}}
Without the float atrribute the navbar will not responsively move to the given definitions.
Refer to the below Measurement of limbs image.
where you can see rectangles and circles where measurement values should be entered. like left side rectangle shows height of leg etc. I want this rectangle as html form field. What I did is i know pathetic one like.
I put image in background of a div and in div put this
#txtDiv1 {
position: absolute;
left: 36px;
top: 10px;
width: 50px;
height: 32px;
z-index: 100;
}
<div id="txtDiv1"><input name="leglength" type="text" style="width:30px; height:20px; border:none" /></div>
So for all input fields I did the same. Can some body tell me how to make it more professional as i m not satisfy with this approach.
Expanding on my comment, you can use a similar layout discussed in this article: https://alistapart.com/article/prettyaccessibleforms
Most of it is simple HTML and CSS, the advantage is now you have more control than just assigning boxes to specific locations on the image. You will also notice more containers, this helps in identifying specific entries. Remember that all this data has to be captured later and stored somehow.
#form-1 .form-background {
background-image: url('https://i.stack.imgur.com/P2W8v.png');
background-repeat: no-repeat;
height: 400px;
}
#form-1 .form-background label {
display: block;
background: white;
text-align: center;
height: 30px;
}
#form-1 .right-leg {
background-position: 0 -10px;
display: inline-block;
width: 175px;
}
#form-1 .left-leg {
background-position: -200px -11px;
width: 180px;
float: right;
}
#form-1 ul {
padding: 0;
margin: 0;
list-style: none;
}
#form-1 ul .box {
background: white;
border: 1px solid black;
border-radius: 3px;
height: 25px;
width: 52px;
}
#form-1 ul .circle {
background: white;
border: 1px solid black;
border-radius: 50%;
height: 37px;
width: 37px;
}
#form-1 ul li.box.right {
margin-left: 120px;
}
#form-1 ul li.box.left {
margin-left: 2px;
}
#form-1 ul li.circle.right {
margin-left: 129px;
margin-bottom: 12px;
}
#form-1 ul li.circle.left {
margin-left: 10px;
margin-bottom: 12px;
}
#form-1 ul li input {
background: transparent;
border: 0;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-1" class="form-wrapper">
<div class="form-background right-leg">
<label>Right Leg</label>
<ul>
<li class="box right" style="margin-top: 33px;"><input type="number" /></li>
<li class="circle right"><input type="text" /></li>
<li class="circle right" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box left"><input type="number" /></li>
<li class="box right" style="margin-top: 30px; margin-left: 116px;"><input type="number" /></li>
<li class="circle right" style="margin-left: 124px;"><input type="text" /></li>
<li class="box left" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
<div class="form-background left-leg">
<label>Left Leg</label>
<ul>
<li class="box left" style="margin-top: 32px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="circle left" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box right"><input type="number" /></li>
<li class="box left" style="margin-top: 30px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="box right" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
</div>
Since the image is not exact, there is lots of adjustments to be made. I used margins to push things around. Also, I am not familiar with each notation or possible value. You may consider that additional notes may want to be added for each measurement. You can use number type for each if you want.
This may seem like a lot of extra work upfront, yet can be very helpful if you add in additional functionality via JavaScript or jQuery. For example, the section of the leg could be highlighted when that measurement is being entered.
Some ideas:
1) Work with percentage instead of pixel. This could help you if you have a responsive view plan in future.
2) Better to add outline:none on each input and add border if you need to have more control with different browsers.
3) Better to have just the picture and draw the lines, arrows and circles(if you need them) with CSS. Again more control on responsive view and more maintainable app.
I am currently developing an app with ionic 3 and I experience one problem from the beginning.
The Statusbar on the startpage (ONLY on the startpage) looks transparent. Here‘s a screenshot:
But all the other pages look how they should look:
Why is that so and what can I do to get rid of this issue?
HTML of the startpage:
<ion-content>
<div class="head">
<div class="balance">
301 €
</div>
<div class="balancetext">
CURRENT BALANCE
</div>
<div class="menu">
<button class="addbutton" (click)="onNewIncome()">
<img src="./assets/imgs/plus.png"> INCOME
</button>
<div class="split"></div>
<button class="exbutton">
<img src="./assets/imgs/minus.png"> EXPENSE
</button>
</div>
</div>
</ion-content>
and necessary SCSS:
html, body{
width: 100%;
background-color: #f5f8fa;
}
.head{
background-image: url('../assets/imgs/pattern_1.png');
background-size: cover;
height: 15em;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>
I am have a very strange issue with my mobile web site.
I am using jQuery Mobile on the site. It works well on other devices, but iPhone safari is not showing header correctly. Here is the screen in iPhone Safari -
It should be like following -
Here is header code i am using -
<div data-role="header" data-theme="c" data-tap-toggle="false">
<div style="height: 40px; border: 0px;" class="ui-header ui-bar-a">
<a href='#' class='ui-btn-left' data-icon='arrow-l'
data-direction="reverse"
onclick="location.href='index.php#mainmenu'; return false;">Back</a>
<div style="text-align: center;">
<img src="images/mytechlogy_full_white_text_bigM.png"
style="width: 200px; padding-top: 5px;" />
</div>
<a href="#" class='ui-btn-right' data-icon='home'
data-iconpos="right"
onclick="location.href='index.php#mainmenu'; return false;">Home</a>
</div>
<div
style="height: 20px; background: #FF9933; vertial-align: middle; padding: 0px; border: 0px;">
<span id="page-title"
style="text-align: left; margin-top: 4px; padding-left: 5px;">My
Profile</span>
</div>
</div>
Please help me in this.
adding data-position="fixed" in solved the problem.
<div data-role="header" data-theme="c"
style="text-align: center; height: 60px;" data-tap-toggle="false" data-position="fixed">