Ways to stop the floating label from blending with the input field

Attempting to incorporate the Bootstrap Material design theme into my project, I have implemented a basic text input field using the code below:

<div class="form-control-wrapper">
    <input class="form-control empty" type="text"></input>
    <div class="floating-label">
        Title
    </div>
    <span class="material-input"></span>
</div>

The output is as follows:

https://i.stack.imgur.com/op81h.png

However, upon entering text, the content and label seem to merge:

https://i.stack.imgur.com/eYKQd.png

Shouldn't the floating-label disappear? What could be causing this issue?

All suggestions are appreciated!

[EDIT 2]

Below are all the imports in my <head>:

<html ng-app="myApp">
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <!-- Bootstrap -->
    <link src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Bootstrap Material Design (https://github.com/FezVrasta/bootstrap-material-design) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

    <!-- Angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

    <!-- Custom scripts -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body>

    <div ui-view></div>

</body>
</html>

Additionally, here's my main.html which I load using Angular:

<form novalidate>
    <div class="form-control-wrapper">
        <input class="form-control empty" type="text"></input>
        <div class="floating-label">
            Title
        </div>
        <span class="material-input"></span>
    </div>
</form>

[EDIT 3] I am also encountering issues with the provided fiddle. The problem persists even after testing in both Chrome and Firefox, both updated to the latest versions:

https://i.stack.imgur.com/9flOf.png

Your insights are highly valued. Do you have any possible solutions?

htmlcsstwitter-bootstrapcss-floatbootstrap-material-design

Answer №1

To avoid hardcoding the "empty" class on your input, it is recommended to utilize the material.js script which will construct your DOM and manage the "empty" css class.

The material.js script has already been imported, so you are all set. Here are the changes you need to make:

  1. Initialize with material.js:

<script>
  $.material.init();
</script>

  1. Clean up your DOM. Your form should resemble the following structure: 
    <form novalidate>
<input type="text" class="form-control floating-label" placeholder="your label"/>
</form>

I trust this guidance will be beneficial.

Answer №2

I have set it up this way

  setTimeout(() => {
    $('.card-content input').change();
    $('.card-content textarea').change();
  }, 500);

Answer №3

function updateInputClasses() {
    $(':input.empty').each(function () {
        $(this).addClass('xempty');
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    });
    $(':input.xempty').change(function () {
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    })
}

$(document).ready(function () {
    updateInputClasses();
});
$(document).ajaxComplete(function () {
    updateInputClasses();
});

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

My HTML files are not getting bundled by Webpack

Despite including dependencies for HTML loaders in my Angular 2 application, webpack is not bundling my HTML files along with the rest of the files it generates. I have tried using both "html-loader" and "html-webpack-plugin," but to no avail. My webpack ...

htmlangularjsangularwebpackwebpack-html-loader

Discovering the previously dropped value from a droppable div

Currently, I am developing a dynamic formula generator using jQuery's drag and drop functionality. Here is what I have accomplished so far: I have two lists: <ul id="head"> <li class="horizontal">Salary</li> <li class="h ...

javascriptjqueryhtmljquery-ui-draggable

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> located at the top center of the webpage, with autoplay running in the backgroun ...

javascripthtmlcssaudio

Show the percentage of completion on the progress bar while uploading with AJAX

I'm having trouble updating the current upload value on my progress bar in real-time. I know how to do it when the progress bar has stopped, but I can't get it to update continuously. xhr.upload.onprogress = function(e) { if (e.lengthComputa ...

javascriptjquerytwitter-bootstrapdynamicprogress-bar

Using FEWER loops to create column classes on Twitter - What is their functionality?

Bootstrap utilizes various LESS mixins to create its column classes, along with other classes; .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index} ...

csstwitter-bootstraploopsless

Adjust the text size to fit perfectly within the boundaries of a textarea input field

Is there a way to ensure that users type within a specific area with formatting and returns in a textarea element? I'm looking for a solution that limits overflow and ensures users stay within the designated area. How can this be achieved? I am worki ...

htmlcss

What is causing the discrepancy in CSS line-height when text spans multiple lines?

Can anyone explain why there is extra space above the first paragraph in this HTML and CSS code, but not the second or third? The line-height is consistent for all three paragraphs. How can I adjust it so that there is equal spacing around all three paragr ...

css

Are you struggling to get basic HTML and JS code to function properly?

I'm currently working on developing a racing game, and my initial step was to create the car and implement movement functionality. However, I've encountered an issue where nothing is displaying on the canvas - neither the rectangle nor the car it ...

javascriptjqueryhtmlcanvas

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

Unable to trigger JavaScript function from ASP.NET MVC HTML view

I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...

javascripthtmlasp.net-mvc

Retrieving data beyond an HTML form

Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...

phphtmlforms

What specific CSS property creates the distinction in text vertical alignment between a <button> and a <div>?

I recently discovered that the text inside a <button> is automatically vertically centered, whereas the text inside a <div> is aligned to the top. Despite my best efforts, I couldn't determine which CSS rule was responsible for this disti ...

htmlcss

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Hey there, wonderful people of StackOverflow! I am absolutely stumped and cannot figure out how to smoothly transition this color-changing text from its current state into a different solid color when the submit button is clicked. Is there a skilled indiv ...

javascriptjqueryhtmlcssanimation

I used the `MyWindow=window.open` function to display a pop-up window and then navig

On my webpage (http://localhost:8088/hse/public/explorer), I have implemented two buttons: When these buttons are clicked, a new pop-up window will open at (http://localhost:8088/hse/public/explorer/1) onClick="MyWindow=window.open('http://local ...

javascriptjqueryhtml

Transition from the previous image to the new one with a fading effect to enhance list item navigation

I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...

javascriptjqueryhtmlcss

Determine the location of a character based on its index position

Is it feasible to identify the precise x and y coordinates of the character at position 24 (e.g., '-') in this overflowing multi-line text? ...

jqueryhtmlcss

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs