I am wondering how is it possible that when I am running openui5 application on different devices, it behaves differently on devices with viewing the vertical scrollbar - that's what I need to solve.
I have devices:
zebra TC510K with 6.1.0 android version and on this device, the scrollbar is not visible.(I want it to be visible)
computer and other mobile devices such as PM80 with android 5.0.2, or xperia z1 comp. with android 5.1.1 the scroll bar is visible as it is supossed to be.
Code I use:
<ScrollContainer id= "scrollCont" vertical="true" focusable="true" height="100%" class="sapUiResponsiveContentPadding">
<Table
class="sapUiResponsiveContentPadding"
width="auto"
enableBusyIndicator="true"
includeItemInSelection="true"
items="">
<columns></columns>
<items>
</items>
</Table>
<Toolbar class="sapUiResponsiveContentPadding" id="idAssetListsPageTerminator">
<ToolbarSpacer/>
<Title text=""
level="H3">
</Title>
<ToolbarSpacer/>
</Toolbar>
</ScrollContainer>
So inside ScrollContainer there are some things... property vertical is set to true. I tried adding this to the css but without positive result:
::-webkit-scrollbar {
-webkit-appearance: none;!important;
}
::-webkit-scrollbar:vertical {
width: 12px;!important;
}
::-webkit-scrollbar:horizontal {
height: 12px;!important;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);!important;
border-radius: 10px;!important;
border: 2px solid #ffffff;!important;
}
::-webkit-scrollbar-track {
border-radius: 10px;!important;
background-color: #ffffff;!important;
}
also I tried this but without any result:
#scrollCont { overflow-x: scroll; !important;
overflow: scroll;!important;
-webkit-overflow-scrolling: touch;!important;}
Could you suggest any solution?
Related
I have light and dark mode versions of my logo, with light mode set as the default. When I view my email on iCloud.com's Mail app, the dark mode version of my logo, which is all white, displays. With the white background behind the logo, the logo becomes hidden. I should see the color version of my logo with the white background behind as shown below.
This issue ONLY appears with iCloud.com's Mail app using my laptop/desktop. It does NOT happen in the mobile iOS version (iPhone & iPad), nor does it happen in Gmail and Outlook.
The mso code below is for Outlook, so in my case I'm saying if it's not Outlook, load the div with the "dark-img" class. This is hidden by default until the CSS media query "dark" is preferred by the user. Then I show the white logo (.dark-img) and hide the color logo (.light-img).
#media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: normal !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img {
display: none !important;
}
}
<img class="light-img" src="https://example.com/content/img/color-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="left">
<img src="https://example.com/content/img/white-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
</div>
<!--<![endif]-->
How to create scrollViews in harmonyOS? CSS/HTML/JS accepted, not java, because I develop on smart devices.
Android:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<!-- everything you already have -->
</TableLayout>
</ScrollView>
Basically I want to create a parent scrollview and then put divs in that:
[SCROLLVIEW_START]
<slider value="7" max="10" min="0"
style="background-color : transparent; width : 454px; height : 50px;"/>
<div for="{{ array }}" tid="id" onclick="changeText"
style="background-color : #11efefef; align-items: center;
border-color: black; border-width: 2px; height: 60px; width: 404px;">
<text style="padding: 20px; color: white;">{{ $idx }}.{{ $item.name }}</text>
</div>
[SCROLLVIEW_END]
So how?
The following are JS Components and Examples：
scroll
div
Using openui5 version 1.42.7, when hovering over the TreeTable area the mouse wheel does nothing and the page does not scroll.
In a previous version, 1.32.9, this behavior worked perfectly.
Here is the basic structure of our page.
<Page id="page" navButtonPress="onNavBack" showNavButton="false" title="
{i18n>pageTitle}" busy="{detailView>/busy}" enableScrolling="true"
busyIndicatorDelay="{detailView>/delay}">
<content>
<Panel id ="panel" expandable="false" expanded="false" width="auto" visible="true"
class="sectionHeaderbackground">
<IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding backgroundFormArea"
height="20px" visible="true" select="onSelectChanged" headerMode="Inline"
expandable="false">
<items>
<IconTabFiter>
<l:Grid defaultSpan="L8 M8 S8">
<l:content>
<TreeTable id="TreeTableBasic" select="onSelectNodes" rows="{path:'/hierarchy',
parameters: {arrayNames:['children']}}" selectionMode="None"enableSelectAll="true"
selected="true" ariaLabelledBy="title" visibleRowCountMode="Fixed">
<t:toolbar>
<Toolbar>
<Title id="title" text="" />
<ToolbarSpacer />
<Button text="{i18n>collapseButton}" press="onCollapseAll" type="Emphasized"
icon="sap-icon://collapse" class="buttonColour"/>
<Button text="{i18n>expandallButton}" press="onExpandAll" type="Emphasized"
icon="sap-icon://expand" class="buttonColour"/>
</Toolbar>
</t:toolbar>
<t:columns>
<t:Column width="13rem">
<Label text="{i18n>locationTreeTable}" design="Bold"/>
<t:template>
<HBox>
<CheckBox selected="{checkValue}" select="locationCheck"></CheckBox>
<core:Icon src="sap-icon://group" visible="{= !!${name}}"
class="paddingClass" />
<Link text="{name}" emphasized="{= !!${locationGroupGUID}}"></Link>
</HBox>
</t:template>
</t:Column>
</t:columns>
</t:TreeTable>
</l:content>
</l:Grid>
</IconTabFilter>
</items>
</IconTabBar>
</Panel>
</content>
</Page>
There are a few other tags I eliminated for brevity, but they are just for unrelated parts of the page that do not have the scrolling issue.
When I use the Developer tools and delete the highlighted div from the Html the scrolling works when hovering over the TreeTable
I'm not very familiar with openUI5. In fact this code was developed by a consultant. They are saying this is a framework issue and there is nothing they can do about.
I suspect this is a bug that needs to be reported on the openui5 github repository but I wanted to check here before submitting the bug in case there is something that is obviously wrong with how this is implemented.
Any advice would be appreciated. Thank you!
I was able to find a work around by redefining the a few of CSS classes in our css file. By adding the attribute pointer-events:none on the sapUiTableCtrlScr class I was able to scroll on the Table.
.sapUiTableTreeIcon {
display: none;
width: 25px;
padding: 0;
flex-shrink: 0;
margin-right: 6px;
pointer-events: auto;
}
The value none sends the mouse event to the element behind the targeted element with this value. Doing this maybe the checkbox and collapse and expand buttons not work so I had to add the pointer-events:auto in the sapUiTableTreeIcon and sapMCb classes.
.sapUiTableTreeIcon {
display: none;
width: 25px;
padding: 0;
flex-shrink: 0;
margin-right: 6px;
pointer-events: auto;
}
.sapMCb {
box-sizing: border-box;
height: 3rem;
line-height: 3rem;
vertical-align: top;
text-align: left;
padding: 0 0 0 3rem;
pointer-events: auto;
}
I want the browser to show a vertical scrollbar when the content grows larger than the page. The content and footer disappear below the screen instead of showing a vertical scroll bar (like we see on the SO home page).
I asked a similar question earlier, but it was directed at why the page footer wouldn't expand as the content grew. I got that sorted out but now the footer moves south but a page scrollbar never shows up.
My UiBinder xml is as follows (here's a link to the file):
<g:DockLayoutPanel unit='PX' styleName="{style.shellStyles.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.shellStyles.header}'>
<div id="login" class="{style.shellStyles.login}">
<g:InlineLabel ui:field="loggedInUser"/>
<g:InlineHyperlink ui:field="loginLogoutLink"/>
</div>
<h1>Flash Cards Application</h1>
</g:HTMLPanel>
</g:north>
<g:center>
<g:FlowPanel>
<g:HTMLPanel styleName='{style.shellStyles.content}'>
<g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
<g:SimplePanel styleName='{style.shellStyles.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
<g:HTMLPanel styleName="{style.shellStyles.footer}" height="70">
<g:Label>© Copyright by Justin Robbins</g:Label>
</g:HTMLPanel>
</g:FlowPanel>
</g:center>
Excerpt of CSS is as follows (here's a link to the full CSS):
.wrap {
width: 820px;
margin: 20px auto 10px auto;
}
#sprite .header {
gwt-image: "headerImage";
background-color: #efefef;
height: 180px;
}
#sprite .content {
gwt-image: "contentImage";
background-color: #efefef;
padding: 10px 40px 20px 20px;
min-height: 500px;
}
.left {
width: 210px;
float: left;
}
#sprite .left h4 {
gwt-image: "sidebarImage";
padding: 0 0 0 10px;
height: 50px;
line-height: 50px;
color: #fff;
}
.right {
width: 530px;
float: right;
padding-top: 10px;
padding-right: 60px;
}
#sprite .footer {
gwt-image: "footerImage";
background-color: #efefef;
height: 70px;
line-height: 70px;
color: #fff;
text-align: center;
}
*{margin:0; padding:0;}
body {
font-family: Arial;
font-size: 12px;
background: #efefef;
color: #232323;
margin:0;
padding:0;
line-height: 150%;
}
Wrap your Flowpanel in the content area with ScrollPanel and set its height. You will get the scroll
You are using a Layout-based panel as your root element, hence it will always fit the whole page and if you resize the browser window, everything will resize accordingly (if you've used ProvidesResize/RequiresResize widget down the road).
If the content you know it will grow, simply wrap it into a ScrollLayoutPanel, or set the first FlowPanel of the <center> element to have overflow (it's ugly as you will see).
You also probably want the footer to be always visible, so why not moving that into the region of the main DockLayoutPanel?
I suggest you to give a read here.
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.