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

The visual representation remains unchanged even after updating the model

I'm currently tackling an issue with my football project, specifically when updating a service model. The project involves two key components - AvailablePlayers and SelectedPlayers, as well as two corresponding services - AvailablePlayersService and S ...

angularangular2-templateangular2-services

Checking connectivity in an Ionic application

Within my Ionic application, I am faced with the task of executing specific actions depending on whether the user is currently connected to the internet or not. I plan on utilizing the $cordovaNetwork plugin to determine the connectivity status within the ...

javascriptangularjsionic-framework

What distinguishes injecting a provider in Angular2's @Component versus @Module?

When working with Angular2, it is possible to specify the providers in either a @Component element or in a @NgModule element. For example: @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: [&apos ...

angular

Are you struggling with customizing Vuetify 3 component settings using scss?

Recently, I've been experimenting with Vuetify's documentation in an attempt to modify the border of a text field. Based on my understanding, the text field border is controlled by the variable $text-field-border-radius. To implement this change ...

vue.jssassvuejs3vuetify.jsvuetifyjs3

What could be causing the position-sticky feature to malfunction within a nested nav on Bootstrap version 5.3.1?

I'm in the process of developing a user-friendly dashboard that incorporates Bootstrap 5.3.1's nested nav feature. However, I've encountered a problem where the navigation disappears when there is too much content on the page. To address thi ...

htmlcsstwitter-bootstrappositionbootstrap-5

Using CSS to cut out a triangle shape from an image

Our designer has a vision for this: However, I'm struggling to find a suitable method for creating the triangle crop effect: Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape Creating a l ...

cssimagepositioncrop

Filtering content with a sliding effect using CSS and JavaScript

I'm currently developing a jQuery mobile app that requires filtering posts on a specific page. I have already added the posts and designed the filter. Take a look at how it appears below: I am working on animating the filter so that when the user se ...

javascriptjqueryhtmlcssanimation

Angular 4: preventing button click until form validation is successful

I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...

htmlangularforms

Utilizing Angular's NgFor directive to showcase the elements within the array

Just diving into Angular and attempting to access the values within postdata. However, I'm running into an issue where only the first value is being retrieved when I try to iterate over it. Here's a snippet of my code: posts; constructor(priva ...

angularexpress

What is the best way to design a trapezoid-shaped div with perfectly centered text?

I'm currently attempting to design a div element that resembles a trapezoid and would like to position text in its center. So far, I have successfully created a div with the top border shaped like a trapezoid. However, the text is centered within the ...

htmlcssreactjs

Sending unstyled HTML content using JavaMail

Can anyone offer guidance on sending an email using JavaMail with unformatted HTML tags? Here is the code I am currently using: public void sendMail() throws MessagingException, IllegalStateException, IllegalArgumentException { Properties properties ...

htmljakarta-mailmime-typescontent-type

Guide to dynamically setting SCSS $variables in JavaScript after retrieving them from local storage in a React application

In my current situation, I am retrieving color combinations in hash values from the database through an API call and then saving them in localStorage for future use. However, I am facing a challenge when trying to access this data from localStorage and uti ...

javascriptreactjssass

Strange Behavior When Floating Right in Chrome

There's a strange issue that I'm facing, only in Chrome. It seems to be adding some extra space on top of an element with float: right, but only when the browser window is resized (you can see how the name then shifts under the header): This pro ...

htmlcssgoogle-chrome

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

Sub menus are not appearing in the drop-down menu

Below is the code for my dropdown button with an additional level. Initially, the button works as intended. However, upon attempting to click within the dropdown submenu, I noticed that all four items displayed the same last submenu only. .icon-cadet-l ...

htmlcsscss-selectors

Animating background color change with scroll in React using fade effect

Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect. import React from "reac ...

javascriptcssreactjscss-transitions

Tips for creating visually appealing tables in ReactJS

For my school project, I need to create a table using ReactJs. I have already created the table but it needs improvement in terms of design. However, I am unsure how to modify my code to achieve the desired look. I tried looking on YouTube for tutorials, b ...

javascripthtmlreactjsweb-applicationstailwind-css

Incorporating Highcharts JS into a mobile app for a seamless data

After deciding to create an Android application that mirrors some features of a webpage, such as weather meteograms built with Highcharts, I delved into the process. Considering my use of Angular 2, I thought utilizing Angular 2 + NativeScript would be th ...

androidhighchartsangularnativescript

Discover the quick method of retrieving the checkbox value instantly

Looking for a way to track when a checkbox is checked using Angular This is the current setup: <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="test[item.id]" ng-click="getID()" ng-checked="checkAll"/> {{ ...

javascripthtmlangularjs

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

htmlcss