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!

  • Aren’t you better off using an html input tag? – glls May 6 '19 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 May 6 '19 at 12:45
  • I tried to use html input tag, no change :( ....... @DerekF Unfortunately, this is not an option. – Salvation May 7 '19 at 7:13
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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.