Auto scroll issue on FixFlex layout?

[sachinrk]

Hi All,

Functionality we using dragging and dropping on tree structure to create material.

While dragging and move mouse pointer at the end of tree list auto scroll is happening in the Chrome but in IE not?

Manual Scrolling of scrollbar in IE for tree|flex layout triggering the same function which triggered on auto scroll in Chrome in sap.ui.core.delegate.ScrollEnablement.

Thanks for your reply in advance.

View.

<mvc:View controllerName="ui_pdeznacospde.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:layout="sap.ui.layout" xmlns:f="sap.ui.layout.form"
	xmlns:commons="sap.ui.commons" height="100%">
	<App>
		<pages>
			<l:Splitter height="100%" orientation="Vertical">
				<l:Splitter class="master BlockLayout">
					<l:layoutData><l:SplitterLayoutData size="30px" resizable="false" minSize="30px"/></l:layoutData>
					<l:HorizontalLayout>
						<SegmentedButton id="idSegBtm" selectedButton="fxcfxf" class="menu_font customBtn bluebtn sapUiSizeCompact sapUiTinyMarginTop">
							<items>
								<SegmentedButtonItem width="29%" text="{i18n>priceDocumentation}" key="{i18n>priceDocumentation}" press="onPrice"/>
								<SegmentedButtonItem width="22%" text="{i18n>workList}" key="{i18n>workList}" press="onWorklist"/>
								<SegmentedButtonItem width="32%" text="{i18n>supplierDetails}" key="{i18n>supplierDetails}" press="onSupplierdetails"/>
								<SegmentedButtonItem width="35%" text="{i18n>BR_Pr_Impt}" key="{i18n>BR_Pr_Impt}" press="onProjects"/>
							</items>
						</SegmentedButton>
						<!--	<RadioButtonGroup buttons="{oVehicle>/items}" visible="false" columns="2" select="onVehicleChanged" class="menu_font rightAlignRadioBtnGrp sapUiSizeCompact" id="idGCarsVans">
							<RadioButton text="{oVehicle>text}" class="radioBtnClr"/>
						</RadioButtonGroup>-->
						<Label text="System" class="rightAlignLabel" id="idSystemLabel" visible="false"/>
						<Select class="sapUiSizeCompact lbl_color arr_color rightAlignSelect" items="{oVehicle>/items}" id="idGCarsVans" change="onVehicleChanged"
							visible="false">
							<core:Item text="{oVehicle>text}" key="{oVehicle>text}" class="ulSelect"/>
						</Select>
						<core:Icon src="sap-icon://home" class="rightAllign sapUiTinyMarginTop sapUiSmallMarginBottom" size="17px" color="#ffffff" press="onHome"></core:Icon>
					</l:HorizontalLayout>
				</l:Splitter>
				<l:Splitter id="splitapp" visible="true">
					<Page id="idMasterPage" title="{i18n>masterTitle}" enableScrolling="false" visible="false" showHeader="false">
						<content>
							<!-- Master Page to show the project explorer-->
							<mvc:XMLView viewName="ui_pdeznacospde.view.Master"/>
						</content>
						<layoutData><l:SplitterLayoutData id="idMasterSplitterWidth" size="0px" resizable="false"/></layoutData>
					</Page>
					<Page id="price" visible="true" showHeader="false">
						<content>
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.NothingSelected" id="idNothingSelected" visible="true"/>-->
							<!-- Detail Page to show the Price Matrix view-->
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.Detail" id="idPriceMatrix" visible="false"/>-->
							<!--@ author SMAHESH-->
							<!-- Detail view to show the tools-->
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.Tools" id="idTools" visible="false"/>-->
							<!--@ author GSHAILE-->
							<!-- Detail view to show special demands-->
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.Specialdemands" id="idSD" visible="false"/>-->
							<mvc:XMLView viewName="ui_pdeznacospde.view.Welcome" id="idWC" visible="true"/>
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.WorkList" id="idWorkList" visible="false"/>-->
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.Supplier" id="idSupplierView" visible="false"/>-->
							<!--<mvc:XMLView viewName="ui_pdeznacospde.view.BrProjects" id="idBrProjectsView" visible="false"/>-->
						</content>
						<!-- footer to show the action buttons-->
						<footer id="idDetailPageFooter">
							<OverflowToolbar id="idFooterToolbar" visible="false">
								<ToolbarSpacer/>
								<Button id="btnClear" type="Emphasized" visible="false" width="" tooltip="{i18n>detailPage_Button_Delete}"
									text="{i18n>detailPage_Button_Delete}" class="sapUiSizeCompact">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnEdit" type="Emphasized" visible="false" width="" tooltip="{i18n>detailPage_Button_Edit}" text="{i18n>detailPage_Button_Edit}"
									class="sapUiSizeCompact">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnEC" type="Emphasized" tooltip="{i18n>detailPage_Button_EC}" text="{i18n>detailPage_Button_EC}" class="sapUiSizeCompact"
									visible="false">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnSave" type="Emphasized" width="" tooltip="{i18n>detailPage_Button_Save}" text="{i18n>detailPage_Button_Save}"
									class="sapUiSizeCompact" press="onUpdate" visible="false">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnCancel" type="Emphasized" width="" tooltip="{i18n>workList_ActivePMTab_Refresh}" text="{i18n>workList_ActivePMTab_Refresh}" class="sapUiSizeCompact"
									press="onRefresh" visible="false">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnEBANF" type="Emphasized" width="" tooltip="{i18n>detailPage_Button_BANF}" text="{i18n>detailPage_Button_BANF}"
									class="sapUiSizeCompact" visible="false">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnEBANF1" type="Emphasized" width="" tooltip="{i18n>detailPage_Button_Attachments}" text="{i18n>detailPage_Button_Attachments}"
									press="onAttachmentsGl" class="sapUiSizeCompact">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
								<Button id="btnEBANF2" type="Emphasized" width="" tooltip="{i18n>detailPage_Button_PDF}" text="{i18n>detailPage_Button_PDF}"
									class="sapUiSizeCompact" press="onOpenAttachment">
									<layoutData>
										<OverflowToolbarLayoutData moveToOverflow="false"/>
									</layoutData>
									<customData></customData>
								</Button>
							</OverflowToolbar>
						</footer>
						<!-- View to be shown when no node is selected in the Project Explorer-->
						<MessagePage id="idNothingSelected" text="{i18n>detailNoobjectSelected}" icon="sap-icon://detail-view" description="" showNavButton="false"
							showHeader="false" visible="false"></MessagePage>
					</Page>
				</l:Splitter>
			</l:Splitter>
		</pages>
	</App>
</mvc:View>

Some screenshot of console log, Css and drag drop in the IE.

ie-drag-and-drop.png

IE console Log

ie-console-log.png

CSS property applied.

css-ie-01.pngcss-ie.pngcss-ie03.pngcssie02.png