[SalesForce] Lightning Components: How to fix New Button in Related Lists of Visualforce Pages rendered insinde a Visualforce Component on a Flexipage

Unless your Visualforce is creating a modal window, your "New" page will not display as an extra layer above the app. You could consider looking into modal components and create your own "New" form.

If you are unfamiliar with the LEX rollout I would strongly suggest you take some time to complete the Develop for Lightning Experience Trailhead. This will take you from understanding what is LEX up to the LEX Design System.

I have Created one custom component which can be used as a quick action and it enables you to create the note related to the current record.

Look what I have done:-

Here is my code:-

<--component-->

<aura:component controller="CreateNoteRecord" 
                implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" 
                access="global" >
    <!-- Define Attribute-->
    <aura:attribute name="note" type="ContentNote" default="{'sobjectType': 'ContentNote','Title': '','Content': ''}"/>

    <div class="slds-m-around--xx-large">
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
                        X
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">Creating Custom Note</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-page-header">
                        <div class="slds-media">
                            <div class="slds-media__body">
                                <center>
                                    <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Requests User Guides">New Note</h1>
                                </center>
                            </div>
                        </div>
                    </div>
                    <b>Title:</b>
                    <br/>
                    <ui:inputText class="form-control" value="{!v.note.Title}"/>
                    <br/>
                    <b>Content:</b>
                    <br/>
                    <lightning:inputRichText value="{!v.note.Content}" placeholder="Type something interesting"/>
                    <br/>
                    <div class="slds-modal__footer">
                        <div class="col-md-4 text-center">
                            <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
                             <ui:button class="btn btn-default" press="{!c.closeModel}">Cancel</ui:button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

JavaScript Controller:-

({
    create : function(component, event, helper) {
        //getting the candidate information
        var candidate = component.get("v.note");
        //Calling the Apex Function
        var action = component.get("c.createRecord");
        //Setting the Apex Parameter
        action.setParams({
            nt : candidate,
            PrentId : component.get("v.recordId")
        });
        //Setting the Callback
        action.setCallback(this,function(a){
            //get the response state
            var state = a.getState();
            //check if result is successfull
            if(state == "SUCCESS"){
                //Reset Form
                var newCandidate = {'sobjectType': 'ContentNote',
                                    'Title': '',
                                    'Content': ''
                                   };
                //resetting the Values in the form
                component.set("v.note",newCandidate);
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.recordId"),
            "slideDevName": "detail"
        });
        navEvt.fire();
        $A.get('e.force:refreshView').fire();
        //adds the server-side action to the queue        
        $A.enqueueAction(action);
    },
    closeModel : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.recordId"),
            "slideDevName": "detail"
        });
        navEvt.fire();
    }
})

css:-

.THIS .slds-modal__container{
       max-width: 50rem !important;
       width:100% !important;

}

APEX Controller:-

public with sharing class CreateNoteRecord {
    @AuraEnabled
    public static void createRecord (ContentNote nt, id PrentId){
        try{
            if(nt != null){
                insert nt;
                ContentDocument cd=[select id from ContentDocument where id=:nt.Id];
                ContentDocumentLink cdl=new ContentDocumentLink();
                cdl.ContentDocumentId=cd.id;
                cdl.LinkedEntityId=PrentId;
                cdl.ShareType='V';
                cdl.Visibility='AllUsers';
                insert cdl;
            }
        } catch (Exception ex){

        }
    }    
}

Once the note is getting created, I am inserting the ContentDocumentLink object to link the current record to this note.

Hope it helps you.