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
Related
The ProgressIndicator should be aligned vertically in a same row.
Current output:
<form:SimpleForm id="idSimpleForm"
editable="false"
layout="ResponsiveGridLayout"
maxContainerCols="2"
columnsM="2"
singleContainerFullSize="false"
labelSpanS="5"
>
<Label text="Lines Of Code"/>
<Text text="{...}"/>
<Label text="CSS"/>
<ProgressIndicator percentValue="100" state="Success"/>
<Text text="{...}"/>
<Label text="XML"/>
<ProgressIndicator percentValue="30" state="Success"/>
<Text text="{...}"/>
<Label text="JavaScript"/>
<ProgressIndicator percentValue="20" state="Success"/>
<Text text="{...}"/>
</form:SimpleForm>
Desired output:
Simply set displayOnly to true.
<form:SimpleForm layout="ResponsiveGridLayout">
<Label text="CSS"/>
<ProgressIndicator displayOnly="true" displayValue="14k" percentValue="100" state="Information" />
<Label text="XML"/>
<ProgressIndicator displayOnly="true" displayValue="7.3k" percentValue="30" state="Information" />
<Label text="JavaScript"/>
<ProgressIndicator displayOnly="true" displayValue="2.1k" percentValue="20" state="Information" />
</form:SimpleForm>
From: https://jsbin.com/huvokeg/edit?js,output
Avoid custom CSS.
you can add a class to the progress indicator control and redefine the style accordingly. e.g. class name is progress-indicator.
.progress-indicator {
margin: 0px !important;
height: 1.25rem;
border-radius: 1px !important;
}
.progress-indicator .sapMPIBarPositive {
background-color: #91C8F6;
}
.progress-indicator .sapMPIBar {
border-radius: 1px !important;
}
.progress-indicator .sapMPIBarRemaining {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
demo: https://jsbin.com/meviqeb/edit?html,css,output
My goal is to achieve this layout for an array of Images:
As you can see, a simple 2 column grid of square images - this is quite easy in a Bootstrap environment where one specifies 2 cols or size 6 each, then simply setting the images' CSS object-fit to cover in order to avoid stretching and setting the height to auto.
Problem is, where I'm trying to achieve this is in Ionic 4 where the img element is a web component and only certain properties are exposed to that can be customized. So far I can get the images displayed in a 2 column fashion but the aspect ratios are off.(Also I HAVE to use the element, so cannot simply use HTML5 img element).
Here is what I have so far:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let image of selectedImageURIs">
<ion-img [src]="image"></ion-img>
</ion-col>
</ion-row>
</ion-grid>
Note: The Ionic Framework has it's own 'Bootstrap' like framework called ion-grid. What I end up with is this:
I know need to get them to be the same in height and with and set the object fit to cover, but how can I do this with an ion-img? I is a web component so the Shadow Dom comes into play. The docs just mention "The component uses Intersection Observer internally". Will that be able to do what I need? I'm new to web components to trying to understand what I'm missing.
Here is a solution that I used for my Ionic 4 app. I used css to accomplish the look you're going for. Your template will look something like this and using ion-img to take advantage of the lazy loading feature.
html
<ion-grid>
<ion-row>
<ion-col *ngFor="let category of categories" size="6">
<button #categoryButton type="button" (click)="selectCategory(categoryButton, category)" class="category-button">
<ion-card padding class="category-card">
<ion-card-content class="category-card-content">
<ion-img *ngIf="!imageNotLoaded; else loadingCategory" src="{{category.icon_image}}" class="category-icon" (ionError)="imageNotLoaded = true"></ion-img>
<ng-template #loadingCategory>
<ion-skeleton-text animated style="height: 70px;width: 70px"></ion-skeleton-text>
</ng-template>
</ion-card-content>
<ion-card-title class="category-title">{{category.name}}</ion-card-title>
</ion-card>
</button>
</ion-col>
</ion-row>
</ion-grid>
Set up your sass code like this.
scss
ion-col {
text-align: center;
}
.active {
.category-card {
border-color: var(--ion-color-primary)!important;
box-shadow: 0 4px 16px var(--ion-color-primary)!important;
}
}
.category-button {
padding: 4px;
background: transparent;
.category-card {
min-width: 100%;
margin: 0;
border: 2px solid;
.category-card-content {
text-align: center;
.category-icon {
width: available;
}
}
.category-title {
font-size: x-small;
font-weight: bolder;
}
}
}
This then yields the final result as this picture below.
Note: this is all component level code other wise you'll need to use ::ng-deep to get around the shadow dom for your css code.
page.html
<ion-row class="row-card">
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-medical.png" class="img-service" />
</ion-card>
</ion-col>
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-professional.png" class="img-service" />
</ion-card>
</ion-col>
</ion-row>
page.css
.row-card{
padding: 0px 5px 0px 5px;
.col-card{
padding: 0px;
.card-service{
margin: 5px;
height: 160px;
border-radius: 0px;
padding: 8px;
box-shadow: 0px 0px;
.img-service{
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 auto;
border: 0 solid #024f9a;
background: linear-gradient(#0486ca,#024f9a);
border-radius: 50%;
padding: 15px;
font-weight: bold;
}
}
}
}
Here is working one
ion-grid >
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">
<img src=''/>
<!-- <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div> -->
</ion-col>
</ion-row>
</ion-grid>
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?
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'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}