I am very new to ionic. Trying to put a nice looking picture into the header. So right after I added the ion-nav-title in index.html it becomes like this http://imgur.com/a/XzCpS , the picture was too big. I need the image to fully be shown and also the top nav to not block the form the page.All help will be greatly appreciated :)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="lib/ngStorage.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar bar-header navBar" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<img alt="Company Logo" height="100" src="img/logo.png">
</ion-nav-title>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
style.css*
.navBar {
height: 100px;
background: #fffef1;
}
Eventsearch.html
<ion-view>
<ion-content padding="true" class="has-header">
<form id="othername-form1" class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-select" >
<span class="input-label">Country</span>
<select ng-model="selected">
<option>Hong Kong</option>
<option>Tokyo</option>
<option>Paris</option>
</select>
</label>
</form>
<a class="button button-positive button-block" ui-sref="tab.schedule({country:selected})">Go</a>
<p>You are searching for events in {{selected}}</p>
</ion-content>
</ion-view>
Try setting the height to auto and the maximum to a huge value:
.navBar {
height: 100;
background: #fffef1;
}
ion-nav-title {
height: 100;
}
Related
I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.
i am beginner in the spring and i try to create a simple layout with child view in the spring using hibernate.
but i can't understand how to create it.
please help me.:D
simple layout in asp.net core
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>ProDent - Dentist Template</title>
<meta charset="UTF-8" />
<meta name="description" content="ProDent dentist template" />
<meta name="keywords" content="prodent, dentist, creative, html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link href="/img/favicon.ico" rel="shortcut icon" />
<link href="~/css/fontiran.css" rel="stylesheet" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
<!-- Stylesheets -->
<link href="~/css/persianDatepicker-default.css" rel="stylesheet" />
<link href="~/css/RegistrationStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/flaticon.css" />
<link rel="stylesheet" href="/css/owl.carousel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<!-- rtl -->
<link rel="stylesheet" href="/css/rtl.css" />
#RenderSection("StylesOnViews", false) <!--here rendering styles on child views-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Page Preloder End -->
<!-- Header section -->
#(await Component.InvokeAsync("HeaderSiteComponent"))
<!-- Header section end -->
#RenderBody() <!--here rendering child view-->
<!-- Footer top section -->
#(await Component.InvokeAsync("footerSiteComponent"))
<!-- Footer top section end -->
<!--====== Javascripts & Jquery ======-->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/circle-progress.min.js"></script>
<script src="/js/main.js"></script>
<script src="~/js/FactsScripts.js"></script>
<script src="~/js/persianDatepicker.js"></script>
#RenderSection("ScriptsOnViews", false) <!-- here rendering scripts on child views -->
</body>
</html>
and my child view :
all of this html file replaced with #RenderBody in layout
#{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<section class="page-info-section set-bg" data-setbg="img/page-info-bg/1.jpg">
<div class="container">
<h2 class="text-center">ورود کاربران</h2>
</div>
</section>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(img/dentists.jpg);">
<span class="login100-form-title-1">ورود کاربران</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="لطفا نام کاربری خود را وارد کنید!">
<span class="label-input100">نام کاربری</span>
<input class="input100" type="text" name="username" placeholder="نام کاربری خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="لطفا رمز عبور خود را وارد کنید!">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" name="pass" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30 text-right" dir="rtl">
<div>
رمز عبور خود را فراموش کرده اید؟
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">مرا بخاطر بسپار</label>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">وارد شوید</button>
</div>
</form>
</div>
</div>
</div>
#(await Component.InvokeAsync("HeaderSiteComponent"))
and
#(await Component.InvokeAsync("footerSiteComponent"))
in the layout are header(menu items and..etc) and footer.
menu items in the header component load form dataBase and also i can send data to this component..
what is this equivalent in spring?
i found answer this question :
for create a layout or component i should create fragment in spring using thymeleaf.
for example :
1-create footer html file and called footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footer">
<p>your content....</p>
</footer>
</body>
</html>
notice : only attention to footer tag because only footer will be
insert into homePage moreover you should call footer by name that put front th:fragment
2- now you may call footer in homePage.
see following code :
<body>
...
<div th:insert="fragments/footer :: footer"></div>
</body>
more information :
https://attacomsian.com/blog/thymeleaf-fragments#:~:text=A%20fragment%20in%20Thymeleaf%20is,repeated%20used%20on%20multiple%20pages.
In your opinion, you should first define a fragment and then set the output format with the following code
<body>
<div th:insert="fragments/components :: header"></div>
<div th:replace="fragments/components :: header"></div>
<div th:include="fragments/components :: header"></div>
</body>
I have some trouble setting up a materialize search bar (https://materializecss.com/navbar.html) that includes autocomplete (https://materializecss.com/autocomplete.html) for my website.
The autocomplete seems to "overwrite" the display of the search icon. If you do a "select all" you will see that the icon has turned white and is not aligned anymore.
Here is my index.html file so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</head>
<nav>
<div class="nav-wrapper white">
<form action="results" method="post">
<div class="input-field">
<input class="autocomplete" id="search" name="q" type="search"/>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 1,
limit:5
});
});
</script>
</html>
I also figured out that with no data in the autocomplete js, the display of the search bar remain "normal".
Does anyone knows how or has solved this issue? Thanks!
Over-ride these two things from input-field label class.
.input-field label {
-webkit-transform: translateY(0px) !important;
transform: translateY(0px) !important;
}
Use new versions of cdnjs.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
I'm trying to make a sign in page for my web application and I followed the steps on this website:https://developers.google.com/identity/sign-in/web/sign-in
but the google sign in button won't show up, it's just a blank screen but I see that the google icon shows up and fades so it is connecting to google.
this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Google SignIn</title>
<!-- Bootstrap CDN: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Google Sign In Client ID -->
<meta name="google-signin-client_id" content="**MY GOOGLE CLIENT ID**">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<style>
.g-signin2{
margin-left:500px;
margin-top:200px;
}
.data{
display:none;
}
</style>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>Email Address</p>
<p id="email" class="alert alert-danger"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
</body>
</html>
The Google Sign in API works only on a running web server. You will not be able to see the Sign in button if you are directly opening the file.
I am using ionic framework to make a simple application( you can search through itunes for tracks). However, when displaying a lot of results, the ion content isn't scrollable. Here is my markup:
<!DOCTYPE html>
<html ng-app="hiphop">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-controller="SearchCtrl" ng-app="hiphop">
<ion-pane>
<ion-header-bar class="bar-stable">
<label class="item-input-wrapper header">
<i class="icon ion-android-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search.query" ng-enter="search()" />
</label>
</ion-header-bar>
<ion-content class="has-header" animation="slide-left-right" padding="true" scroll="true" has-bouncing="true">
<!-- our list and list items -->
<div class="list">
<a class="item item-avatar" href="#" ng-repeat="item in items">
<img src="{{ item.artworkUrl60 }}">
<h2>{{item.trackName}}</h2>
<p>{{item.artistName}}
</p>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Codepen demo (with also js).
Why isn't it possible to scroll? How to do it?
PS: I am using Intel XDK
You had included ionic.bundle script 2 times, I removed one in your code-pen example and scrolling worked.
http://codepen.io/anon/pen/ynCsc