What's the best way to position an ion-label at the top of the stack

I'm having trouble creating an input label similar to the new Google style. However, when the label moves up, it gets cut in the middle as shown here.

Despite trying to adjust the margin, padding, and Z-index, none of these solutions have resolved my issue.

I am not utilizing the default ionic classes because they do not align well with my design preferences.

How can I achieve a label display similar to Google's input style?

Here is my SCSS code:

.invalid {
  border: 2px solid #f53d3d !important;
}

.danger {
  color: #f53d3d;
}

.item-input {
  margin-top: 5px;
  &.invalid {
    color: red;
  }
}

ion-label.google-label {
  color: #fff;
  background-color: #3880ff;
  font-size: 12px;
  margin-left: 10px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  position: absolute !important;
  margin-bottom: 5px !important;
  z-index: 9;
}

ion-input.google-input {
  padding-top: 10px !important;
  color: white;
  border: 2px solid white;
  width: 100%;
  max-width: 100%;
  padding-left: 10px !important;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

item-label-floating {
  &.ion-invalid.ion-touched {
    .google-label {
      color: #f53d3d !important;
    }
  }
...

<p>And here is my HTML code:</p>

<pre><code><ion-item lines="none">
  <ion-label class="google-label" position="floating" [class.danger]="showErrors('email')">
    E-Mail
  </ion-label>
  <ion-input formControlName="email" class="google-input" [class.invalid]="showErrors('email')" type="text">
  </ion-input>
</ion-item>

I expected the label to appear like this:

https://i.stack.imgur.com/2arur.png

htmlcssangularionic-frameworksass

Answer №1

For those seeking a solution, I managed to address it using the following approach:

HTML:

    <div class="label-float" [class.invalid]="showErrors('email')">
      <input type="text" formControlName="email" placeholder=" " />
      <label>E-Mail</label>
    </div>

SCSS:

.label-float {
  position: relative;
  padding-top: 13px;
  &.invalid {
    label {
      color: #f53d3d !important;
    }
    input {
      border: 2px solid #f53d3d !important;
    }
  }

  input {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    outline: none;
    min-width: 250px;
    padding: 15px 20px;
    font-size: 16px;
    transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -webkit-appearance: none;
    &:focus {
      border: 2px solid #3951b2;
    }
    &::placeholder {
      color: transparent;
    }
  }
  label {
    color: #fff;
    pointer-events: none;
    position: absolute;
    top: calc(50% - 8px);
    left: 20px;
    transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    background-color: #3880ff;
    padding-top: 5px;
    margin-left: 10px;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
  }
}

.label-float input:focus + label,
input:not(:placeholder-shown):not(.invalid) + label {
  font-size: 13px;
  top: 0;
  color: #3951b2;
}
.label-float input:not(:focus):not(:placeholder-shown):not(.invalid) + label {
  font-size: 13px;
  top: 0;
  color: #fff;
}

Answer №2

To ensure the text displays properly, you may need to apply overflow: visible to the element. If this doesn't resolve the issue, adding a slight padding-top could be a workaround solution, albeit somewhat of a hack.

Answer №3

Simply include the ion-item css overflow:inherit and avoid using z-index.

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

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

htmlcsstypography

Enhancing Security with Subresource Integrity in Angular-Cli

Has anyone discovered a way to enable Subresource Integrity with Angular-CLI? I came across this GitHub Pull Request that suggests it may become a feature in the future: GitHub Pull Request. I tried to activate it on the current versions but had no luck. ...

javascriptangularangular-clicontent-security-policysubresource-integrity

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

Implementing microdata without visibly displaying tagged entities on the webpage

I have a query regarding the implementation of Microdata on my webpage where tagged entities are not being displayed. For instance, I want to talk about two individuals in a paragraph without their names appearing on the webpage. Is there a method to only ...

htmlmicrodata

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Troubleshooting common issues with PHP's simple HTML DOM parser

I've encountered an issue while working on a scraper for a website that involves crawling through links. The error message I'm receiving is as follows: PHP Fatal error: Uncaught Error: Call to a member function find() on null in D:\Projekti ...

phphtml

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

javascripthtmlxcodecordova

Navigating to the following webpage with Selenium using Python

url_main = "https://comic.naver.com/webtoon/detail.nhn?titleId=131385&no=292" This particular website features a comment pagination at the bottom of the page. Upon inspecting the page, I noticed that the buttons were structured like this: &l ...

pythonhtmlcssseleniumselenium-chromedriver

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

javascriptjqueryhtmlformsfunction

The error code TS2474 (TS) indicates that in 'const' enum declarations, the member initializer must be a constant expression

Error code: export const enum JSDocTagName { Description = "desc", Identifier = "id", Definition = "meaning", } Implementing Angular 6 in conjunction with the .NET framework. ...

.netangulartypescript

Tips for incorporating a development server proxy with Ionic and Vue

I am interested in utilizing the Proxies feature of Ionic in my Vuejs project built with Ionic. While I have come across solutions for proxy issues in Ionic + Angular and Vue + Webpack projects, I have yet to find a resolution for my specific Ionic + Vue ...

vue.jsionic-frameworkionic-cli

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

javascriptangularjsangulartypescriptwikitude

Modifying element size using jQuery causes issues with maintaining a 100% height

I am facing an issue with a sidebar that is styled using the following css properties: background:#164272; position:absolute; left:0px; top:70px; width:250px; height:100%; When I use jQuery to display a table that is initially hidden and on ...

javascriptjqueryhtmlcss

Is there a way to navigate to a specific component selector within an ngFor loop?

I have a scenario where I have multiple components running inside *ngFor on the same page. My goal is to create button links at the top of the page that, when clicked, will scroll to the corresponding component on the page. Below are the code snippets tha ...

angulartypescriptngfor

The functionality of anchor links created through ajax is not operating correctly

Issue: I am encountering a problem where I have a table filled via Ajax, containing local anchors. When an anchor is clicked, it should make a section visible and automatically scroll to it. This functionality works when manually filling the table, but not ...

javascriptphpjqueryhtmlajax

Using CSS to design a table-like structure with rows that span multiple columns

I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...

javascriptjqueryhtmlcss

Assign a class to the checkbox of the first parent

I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...

jqueryhtmlcss

Step-by-step guide on replacing a visible div with a new div when a button is clicked

I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements. My goal is to display only one div at a time when a user clicks on one of the links located on the left side. ...

jqueryhtmlcss

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas