Tag: title

Positioning The Title: IONIC APPS

Some components like titles, tabs behave according to the platform they are built for. For example, on iOS the default display of view title is at the center and to the left in android devices.


ionic-title-positioning

This might look like a minor thing at the beginning of app development, but when we want to place some icons in the header(maybe for branding purpose) we might like to place the view title to right or to the center.

To have consistent looks across platforms we can ‘hard set’ the view title location by setting the navBar.alignTitle function of $ionicConfigProvider.

$ionicConfigProvider.navBar.alignTitle() takes 3 values
1. left
2. right
3. center


[youtube https://www.youtube.com/watch?v=Owc6x79OTK8]

YouTube Link: https://www.youtube.com/watch?v=Owc6x79OTK8 [Watch the Video In Full Screen.]



Quick fix to change position of each view:

< ion-view>
< ion-nav-title>
<center>Technotip</center>
< /ion-nav-title>
< ion-content>
< /ion-content>
< /ion-view>

As shown above, you could make use of our good old HTML friend center tag to align the nav title to center! or take some time to play with CSS to achieve the same.

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern-title-attribute-html5-regular-expression

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
<label for="age">Age: </label>
 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

label{
width: 50px;
    float:left;
}
 
input{
width: 200px;
}
 
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=TKLF0Aydcv4]

YouTube Link: https://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours :-)