0

I am using custom styling in VF page and showing apex:inputFile component as a SLDS-button. This styling is working in chrome, but not working in Edge and FF. In Edge, the stylings in ::after are all getting crossed.

I have used the styling as given here, and modified them to display slds-button.

How can this be achieved in Edge?

Also, the styles are not crossed out in Firefox, but still I get same UI output as is in Edge.

Code:

<apex:slds />

<style>
.fileType {
    display: block;
    position: absolute;
    width: 5rem;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 1.6em;
    border-radius: 5px;
    outline: 0;
    color: white;
    background-color:rgb(255, 255, 255);
    }
    .fileType:hover:after {
    background-color: rgb(244, 246, 249);
    }
    .fileType:after {
    transition: 200ms all ease;
    background-color:rgb(255, 255, 255);
    font-size: .75rem;
    text-align: center;
    position: absolute;
    top: -0.6em;
    left: 0;
    width: 7em;
    height: 2.8em;
    display: block;
    content: 'Browse';
    border: 1px solid rgb(216, 221, 230);
    color: rgb(255, 255, 255);
    vertical-align: middle;
    border-radius: .25rem;
    line-height: 2.5em;
    color: rgb(0, 112, 210);
    }                                                                                                                             
</style>

<apex:form id="theForm">

    <!-- divContainer -->
    <div id="divContainer" class="slds">     

            <div class="slds-form-element__group">
                <!-- File Input -->
                <div class="slds-grid slds-m-top--xx-medium">                                                                
                    <div class="slds-form-element slds-size--1-of-1">
                    <label><abbr class="slds-required">*</abbr>File</label><br></br>
                        <apex:inputfile id="fileSelectedForUpload"
                                        styleClass="fileType slds-m-top--x-small"
                                        style="color:white"
                                        >
                        </apex:inputfile>
                    </div>
                </div>
            </div>
    </div>
    <!-- divContainer -->
</apex:form>

In Chrome: enter image description here

In Edge: enter image description here

1 Answer 1

1

Got the solution after googling a bit here

Wrapped up the apex:inputFile in tag and gave fileContainer style class as below externally. In earlier case the ::after pseudo class was causing problems in browsers, which here was not an issue.

Following code solved the issue:

<apex:slds />

<style>
.fileContainer {
        overflow: hidden;
        position: relative;
    }

    .fileContainer [type=file] {
        cursor: pointer;
        display: block;
        font-size: 999px;
        filter: alpha(opacity=0);
        min-height: 100%;
        min-width: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        text-align: right;
        top: 0;
    }                                                                                                                                       
</style>

<apex:form id="theForm">

<!-- divContainer -->
<div id="divContainer" class="slds">     

        <div class="slds-form-element__group">
            <!-- File Input -->
            <div class="slds-grid slds-m-top--xx-medium">                                                                
                <div class="slds-form-element slds-size--1-of-1">
                <label><abbr class="slds-required">*</abbr>File</label><br></br>
                    <label id="fileInputLabel" class="fileContainer slds-button slds-button--neutral slds-m-top--xxx-small">
                            Browse
                            <apex:inputfile id="fileSelectedForUpload"
                                        onchange="onFileChange(this);"
                                        value="{!objAttachment.body}" 
                                        filename="{!objAttachment.Name}" 
                                        size="{!objAttachment.BodyLength}" 
                                        contentType="{!objAttachment.ContentType}"
                                        style="color:white">
                                        </apex:inputfile>
                         </label>
                </div>
            </div>
        </div>
</div>
<!-- divContainer -->
</apex:form>
3
  • Can you explain what change fixed it? Code dump as an answer is not really useful
    – Eric
    Aug 17, 2017 at 12:51
  • 1
    @Eric: Edited the answer with details. Let me know of any more info if required.
    – Sarang
    Aug 17, 2017 at 13:05
  • 1
    That should help others with similar issues. Don't forget to mark it accepted when you can
    – Eric
    Aug 17, 2017 at 13:23

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.