Tips for aligning content in the Login Screen of Framework7?

I've been working on a cross-platform mobile application with Framework7. For the login screen, I followed a tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm

Here is the code snippet of my index.html with the login modal:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>App Title</title>
<link rel="stylesheet" href="styles/framework7.min.css">
<link rel="stylesheet" href="styles/my-app.css">
<link rel="stylesheet" href="styles/icons.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<div class="views">
    <div class="login-screen modal-in">
        <!-- Default view-page layout -->
        <div class="view">
            <div class="page">
                <div class="page-content login-screen-content" style="background: whitesmoke; align-items: center;">
                    <div class="block-header">Login</div>
                    <!-- Login form -->
                    <div class="list color-theme-blue">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">Username</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="username" placeholder="Username" required validate>
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">Password</div>
                                    <div class="item-input-wrap">
                                        <input type="password" name="password" placeholder="Password" required validate>
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list">
                        <ul>
                            <li>
                                <div class="row justify-content-space-around">
                                    <button class="col-80 button button-fill color-gray">Login</button>
                                </div>
                            </li>
                        </ul>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="js/framework7.min.js"></script>
<script src="js/my-app.js"></script>
</body>
</html>

I've encountered an issue where the login form stays at the top of the screen instead of being centered. I've tried using some align classes from , but they didn't work. Can you help me solve this problem?

Answer №1

To achieve a centered login screen, set a width for the login-screen-content div and align it using margin: 0 auto.

.login-screen-content {
  width: 400px;
  margin: 0 auto;
}

Alternatively, you can create a new div for your login form and apply the same CSS to center it.

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

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

Adjust the CSS border to finish at a 90-degree angle rather than a 45-degree angle

The div I'm working with has unique colors for the border-bottom and border-right properties, creating a diagonal line that separates the box at a 45 degree angle. I'm looking to adjust the bottom-border to be shorter in order for the right bord ...

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

The first table can be located using basic HTML parsing with simple html dom

When using simple html dom to extract ids from a table, here's what my tables are structured like: <table> <a name="Module-277409-Start_5f7bad2c-10af-4c88-afaf-6c960be2f547"></a> <a name="Module-277409-Start"></a> < ...

Manipulate and scale with jQuery

I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Is there a way to adjust the z-index value of the icons within React Apexchart's toolbar menu? Even when I position my element at a higher level, they remain on top of it. ...

What's the reason why Angular stops flickering with the use of "/" in href?

Recently, I've come across a peculiar issue in one of my web applications while using Angular's routeProvider as a template engine. The app functions properly, but the behavior seems inexplicable to me. The problem arises during page transitions ...

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

What is the best way to use @foreach to make the text in the final row of a table bold?

Is there a way to apply bold styling to the text in the final row using @foreach in HTML? I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely ...

What is the best way to horizontally align a group of list elements while also displaying them side by side?

I've been working on creating a Sign Up page and here is the code I have so far: <div class="form"> <ul class="tab-group"> <li class="tabsignup"><a href="/signup.html">Sign Up</a ...

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

Achieving the ideal positioning of content within the flex property

I am facing an issue with my containers, specifically .grid.left and .grid.right. The images within each of these grids are dynamic and enclosed within another div called .gallery. The problem arises when I apply margins to the image boxes, causing gaps w ...

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

Display an image using a modal window and Ajax XMLHttpRequest

I was tasked with creating a button that can load various types of content (text, images, videos, etc) into a modal popup window using Ajax without any frameworks. So far, I've been successful with text but have run into issues with loading images. De ...

What is the reason behind my styled component only displaying the final state in its className logs?

Here is my implementation using styled components with the version "@types/styled-components": "^5.1.26" and I'll provide you with an example of my code. // index.tsx import React, { useEffect, useState } from 'react'; i ...

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

Creating a loop to dynamically generate HTML input elements for ProcessingJS

Utilizing HTML input fields to manipulate a sketch, I am now aiming to create a loop to produce multiple inputs. var uivars = { tA: "40", // defining initial values tB: "10", }; Subsequently referencing those variables in the sketch: <script type ...

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

Tips for adjusting the size of iframe content to fit its div area in Bootstrap 4 when the window is minimized

I recently started building a website and encountered an issue with resizing the window to fit an iframe containing a video within a div. I'm unsure where exactly in the CSS code I need to make adjustments for this. Can someone help me out? The websi ...