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
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
I use list.js, but it displays also similar results. For example I am typing Mar..., website displays also mur, car, man and etc. How can I disable them?
It is demo from codepen:
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="javve" data-slug-hash="isInl" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="List.js - Fuzzy search">
<span>See the Pen <a href="https://codepen.io/javve/pen/isInl/">
List.js - Fuzzy search</a> by Jonny Strömberg (#javve)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
You are using fuzzy-search, if you change <input type="text" class="fuzzy-search" /> to <input type="text" class="search" /> it works.
check it Codepen
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?
Is it possible to apply a css(3) style to a label of a checked radio button?
I have the following markup:
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
What I was hoping is that
label:checked { font-weight: bold; }
would do something, but alas it does not (as I expected).
Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.
It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.
try the + symbol:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
As such:
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
works very nicely for the following markup:
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
... and it will work for any structure, with or without divs etc as long as the label follows the radio input.
Example:
input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
I know this is an old question, but if you would like to have the <input> be a child of <label> instead of having them separate, here is a pure CSS way that you could accomplish it:
:checked + span { font-weight: bold; }
Then just wrap the text with a <span>:
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
See it on JSFiddle.
I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for= attribute set. So, let's check out a sample on SO:
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
Whew. That was a lot for a "sample" but I feel it really drives home the effect and point: we can certainly select a label for a checked input control without it being a sibling. The secret lies in keeping the input tags a child to only what they need to be (in this case - only the body element).
Since the label element doesn't actually utilize the :checked pseudo selector, it doesn't matter that the labels are stored in the header. It does have the added benefit that since the header is a sibling element we can use the ~ generic sibling selector to move from the input[type=radio]:checked DOM element to the header container and then use descendant/child selectors to access the labels themselves, allowing the ability to style them when their respective radio boxes/checkboxes are selected.
Not only can we style the labels, but also style other content that may be descendants of a sibling container relative to all of the inputs. And now for the moment you've all been waiting for, the JSFIDDLE! Go there, play with it, make it work for you, find out why it works, break it, do what you do!
Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up.
If your input is a child element of the label and you have more than one labels, you can combine #Mike's trick with Flexbox + order.
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
/* style the switch */
:root {
--radio-size: 14px;
}
.switchLabel input.switch {
width: var(--radio-size);
height: var(--radio-size);
border-radius: 50%;
border: 1px solid #999999;
box-sizing: border-box;
outline: none;
-webkit-appearance: inherit;
-moz-appearance: inherit;
appearance: inherit;
box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}
.switchLabel input.switch:checked {
box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}
<label class="switchLabel">
<input type="checkbox" class="switch" />
<span class="left">Left</span>
<span class="right">Right</span>
</label>
asd
html
<label class="switchLabel">
<input type="checkbox" class="switch"/>
<span class="left">Left</span>
<span class="right">Right</span>
</label>
css
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
See it on JSFiddle.
note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using #Nathan Blair hack.
UPDATE:
This only worked for me because our existing generated html was wacky, generating labels along with radios and giving them both checked attribute.
Never mind, and big ups for Brilliand for bringing it up!
If your label is a sibling of a checkbox (which is usually the case), you can use the ~ sibling selector, and a label[for=your_checkbox_id] to address it... or give the label an id if you have multiple labels (like in this example where I use labels for buttons)
Came here looking for the same - but ended up finding my answer in the docs.
a label element with checked attribute can be selected like so:
label[checked] {
...
}
I know it's an old question, but maybe it helps someone out there :)