0

I have an input field and label which I use the floating label technic.

In Chrome\ Edge\ FireFox It works great but on IE it doesn't.

When I test a field via IE I see that it take my label and put it on the side of the input text instead inside in the placeHolder place.

This is my code :

<div class="col-md-3">
    <div class="floating-label input-group ">
        <apex:input html-placeholder=" " styleClass="form-control" value="{!firstName}" type="text" id="firstnameId" required="true" />
        <label class="control-label placeholderinga" for="FirstName"> {!$ObjectType.Opportunity.fields.First_Name__c.label}</label>
    </div>
</div>

CSS :

.floating-label {
   position: relative;
   margin-bottom: 1.5rem;
}


input-group - Bootstrap class


.placeholderinga {
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
    transition: all 200ms;
    opacity: 0.5;
}

.form-control:focus + .placeholderinga,
.form-control:valid + .placeholderinga {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

enter image description here

Any help please?

Thanks!

3
  • Aren’t you better off using an html input tag?
    – glls
    Commented May 6, 2019 at 12:06
  • Salesforce currently only supports IE 11 for Classic as of 2019-4-5, and no versions of IE are supported for Lightning (unless you specifically purchase extended support). If it's an option, abandoning IE entirely is the path of least (developer) resistance.
    – Derek F
    Commented May 6, 2019 at 12:45
  • I tried to use html input tag, no change :( ....... @DerekF Unfortunately, this is not an option.
    – Salvation
    Commented May 7, 2019 at 7:13

1 Answer 1

0

I found the answer to it.

You can use this one :

@media screen\0 {
   .ie891011 {
     left:66%;
     display: inline-table;
     color: red;
     otherAttribute: value
   }
}

And then, just add to your style or styleClass this "ie891011" css class style.

This will add to your style the attribute above or will override if they have the same attributes when using IE V 8,9,10,11.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .