Guide to center align fields in Ionic and Angular

I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues:

  • The width of my input field is taking up the entire space.
  • How can I center both vertically and horizontally as shown in the image (input field, logo, button are all centered).
  • Is it possible to make the button width equal to the input width as depicted in the image?

Here is my code: http://plnkr.co/edit/MeweflpWLXZ8b4KJolu3?p=preview

<div class="bg">
      <div class="logo">
        <img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
      </div>
        <div class="list">

            <div class="list list-inset">
                <label class="item item-input">
                    <i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
                    <input class="user_inputfield" type="text" placeholder="Username">
                </label>
            </div>

            <div class="list list-inset">
                <label class="item item-input">
                    <i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
                    <input class="password_inputfield" type="password" placeholder="Password">
                </label>
            </div>
            <div style="text-align:center;">
 <button class="button button-calm" style="width:40%">
Login</button>
</div>
    </div>
        </div>
javascriptangularjscssionic-framework

Answer №1

View the live example: Live Example

Learn about horizontal and vertical centering with Ionic Grid System: Ionic Grid System Tutorial

Here is the HTML structure:

<html ng-app="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Popover</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body class="bg">

  <div class="row" style="height: 33.3%;">

  </div>
  <div class="row row-center">
    <div class="col-33"></div>
    <div class="col-33 test">

      <div class="logo">
        <img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
      </div>

      <div class="list">

        <div class="list list-inset">
          <label class="item item-input">
            <i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
            <input class="user_inputfield" type="text" placeholder="Username">
          </label>
        </div>

        <div class="list list-inset">
          <label class="item item-input">
            <i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
            <input class="password_inputfield" type="password" placeholder="Password">
          </label>
        </div>
        <div style="text-align:center;">
          <button class="button button-calm" style="width:95%;">
            Login</button>
        </div>

      </div>

    </div>
    <div class="col-33"></div>
  </div>
  <div class="row row-bottom">

  </div>

</body>

</html>

And here is the CSS styling:

/* Custom styles */

.bg {
  width: 100%;
  height: 100%;
  background-image: url("https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0");
}

.username_icon,
.password_icon {
  width: 48px;
  height: 48px;
}

.user_inputfield,
.password_inputfield {
  padding-left: 15px!important;
}

.logo img {
  display: block;
  height: 50px;
  margin: 0 auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I iterate through a directory containing files and extract the exported JavaScript object from each one?

In my current project using nodejs / nextjs, I have file system access and a folder containing multiple React files: content - blog-post-1.jsx - blog-post-2.jsx - blog-post-3.jsx The task at hand is to extract the frontmatter from each file. My init ...

javascriptreactjsnode.jsnext.jsnext.js13

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Methods for retrieving a file within a nodejs project from another file

Currently, my project has the following structure and I am facing an issue while trying to access db.js from CategoryController.js. https://i.sstatic.net/8Yhaw.png The code snippet I have used is as follows: var db = require('./../routes/db'); ...

javascriptnode.jsexpress

Mapping the changes in the checkbox of a material tree node

Check out this demo on StackBlitz: Tree View I'm having issues with the tree not displaying as desired. I would like it to look like this: Manager Sublist Manager 1 Manager 2 Manager 3 Could you please review and provide some advic ...

javascriptangularangular-materialtreeview

Google Script: Implementing multiple conditions based on unique identifiers

A custom script has been designed to keep track of the frequency of VIN numbers repetitions and the status of parts arrival for each unique VIN Number (Car). For instance, if a VIN number appears 5 times, it indicates that five parts are expected to arriv ...

javascriptloopsgoogle-apps-scriptgoogle-sheetsconditional-statements

Verify the content of each file in a bulk upload before transferring them to the server

I am facing an issue with a form that has 3 separate file input fields. I need to validate their MIME types individually before uploading them to the server. The first two should only allow MP3 files, while the last one should only allow JPEG files. Is th ...

javascriptphparraysvalidationfile-upload

Cypress - Adjusting preset does not impact viewportHeight or Width measurements

Today is my first day using cypress and I encountered a scenario where I need to test the display of a simple element on mobile, tablet, or desktop. I tried changing the viewport with a method that seems to work, but unfortunately, the config doesn't ...

javascripttypescriptcypressviewporte2e-testing

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

cssmedia-queries

PHP allows for creating dropdown lists where the values are dynamically dependent on the selection of another dropdown list within the same form

Is there a way for me to implement this solution? The values in the dropdownlist are based on another dropdownlist within the same form. For example, a form with dropdownlists for car names and models of that car, along with a search button. Please take no ...

phpjavascripthtmlajaxdrop-down-menu

A guide to correctly importing a Json File into Three.js

I've been working on some cool projects in Blender and wanted to showcase one using threejs. However, I'm facing an issue where the object isn't displaying properly. Can someone guide me on how to correctly load a JSON file with keyframe ani ...

javascriptjsonthree.jsblender

What is the best way to simulate fetch in Redux Async Actions?

When writing tests in the Redux Writing Tests section, how does store.dispatch(actions.fetchTodos()) not trigger the fetch method when store.dispatch is directly calling actions.fetchTodos? The issue arises when trying to run similar code and encountering ...

javascriptunit-testingreactjsreduxredux-thunk

Issue with input width percentage not functioning as expected

Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen. This is the HTML code I am ...

csshtmlinputwidth

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

I'm currently working on a script for a back to top button that will be placed in the footer of my website. However, I'm running into an issue where I'm getting an error message saying "Cannot read property 'top' of undefined". Any ...

javascriptjqueryhtmlscrolljquery-animate

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

Suggestions for this screenplay

I am completely new to the world of coding and computer languages, and I could use some guidance on how to utilize this script for a flash sale. setInterval(function() { var m = Math.floor((new Date).getTime()/1000); if(m == '1476693000000& ...

javascriptdom-events

Changing the content of a DOM element containing nested elements using JavaScript/jQuery

Need some help with a DOM element that looks like this: <span>text</span> <b>some more text</b> even more text here <div>maybe some text here</div> How can I replace text with candy to achieve this result: <span> ...

javascriptjqueryhtml

Unexpected issues have arisen with the $.ajax function, causing it

I am facing an issue where I can see the loader.gif but unable to view avaiable.png or not_avaiable.png in my PHP file. What could be causing this problem? $(document).ready(function()//When the dom is ready { $("#inputEmail").change(function() { ...

javascriptphpjqueryajax

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

Currently utilizing Angular 2 in a project that is compiled with TypeScript. Encountering an issue when attempting to generate a blob image: Error TS2339: Property 'webkitURL' does not exist on type 'Window' The TypeScript code causi ...

javascriptgoogle-chrometypescriptangularwebkit

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

The function below is designed to generate unique uuidv4 strings. function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)) ...

javascripttypescript

Combining various data types within a single field in BigQuery

Is it feasible to specify a table schema with a field that allows for multiple data types? For instance: BIGQUERY TABLE SCHEMA schema: [{ name: 'field1', type: 'string', }, { name: 'field2', type: &apo ...

javascriptnode.jsgoogle-bigqueryschema