Input Floating Label

1
is floating textbox possible in mendix ?
asked
2 answers
4

Hi Elamathi,

 yes Floating label textbox is possible in mendix with custom styling , 

  1. create a textbox with out label by select show label no in General tab for Text Box
  2. create a Label above your text box and make label style class to match with the form-label
  3. add custom styling with focus and onhover stylings for the input element in theme sources -->your Module main.css
  4. customize your input and label styling classes with your custom styling class

done.

answered
0

Hi,

I appreciate this question has been answered but if anyone is looking for a code snippet i have found the below works for me.

  1. Create a new building block with a container and within this container a text box and another container with a label like this:
  3. The outside container should have a field-container class added in the styling
  4. The textbox should have a “ “ set as the placeholder text and input-container class added in the styling 
  5. The label container should have a field-title-container class added in the styling
  6. The label should have the floating-label class added in the styling

The CSS is as follows:

 

.input-container:has(input:focus) ~ .field-title-container,

.input-container:has(input:focus):valid ~  .field-title-container,

.input-container:has(input:not(:placeholder-shown)) ~  .field-title-container{

    position: absolute;

    left: 1.5rem;

    top: 0.5rem;

    max-width: calc(100% - 1rem);

    height: 0.75rem;

    line-height: .75rem;

    font-size: 1rem;

    pointer-events: none;

}

 

.input-container input{

    letter-spacing: -.025rem;

    width: 100%;

    -webkit-appearance: none;

    background-color: transparent;

    outline: 0!important;

    transition: margin .3s,padding-bottom .3s,color .3s;

       

}

 

.field-title-container{

    position: absolute;

    left: 1.5rem;

    top: 1.5rem;

    max-width: calc(100% - 1rem);

    line-height: 1.5rem;

    font-size: 16px;

    transition: all .3s;

    pointer-events: none;

    z-index: 1;

}

 

.field-container{

    position: relative;

    display: flex;

    flex-wrap: wrap;

    margin-bottom: 0;

}

 

.floating-label {

    width: 100%;

    display: inline-block;

    -webkit-user-select: none;

    user-select: none;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

 

 

The css may require some changing to make it work exactly how you need but this should get you started. The building block can then be used wherever you want to use a textbox.

answered