Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?
Code is pretty standard:
<ons-list-item tappable>
<div class="left">
<img class="list-item__thumbnail" src="img/MyIcon.png">
</div>
<div class="center">
Some text
</div>
<div class="right">
<i class="fa-solid fa-circle" style="color: blue"></i>
</div>
</ons-list-item>
I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?
Thanks
Related
I'm using Bootstrap 5, and in many places I combine a label and an anchor link, and I style the anchor link as small and fig-caption so you get a light gray link that is about the same size as the label.
This works okay on my PC and iPad, but on my phone the link is much larger than the label text.
Why is that, what is better way to do this so remains consistent for all platforms
<div class="row g-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
</span>
</span>
</div>
</div>
Update:Actually I have analysed the problem further and it turns out the issue that I have a heading near the top of the page, and if the heading is longer than the width of the screen I get the issue.
e.g
<div class="row g-0">
<div class="col mx-2">
<h4>
Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)
</h4>
</div>
I don't get the issue if I use h6 instead of h4 even when text is still wider than screen but then the text is smaller than I would like
I don't get the issue if I don't wrap within bootstrap row and column, if I just do:
<h4>Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)</h4>
then it works, but then I have the issue that I dont have the same margin to the left
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
On a tablet (iPad Pro shown), if I double tap the screen to zoom in on the page, and then click to open the Menu, the menu opens under the search box but should open below the header but aligned with the logged in user.
The expected behavior is that it will always open below the logged in user offset vertically below the header.
The html pretty much looks like below. I am using flex to position the items in the header (e.g., logo, search, user) but that shouldn't impact the menu. According to the material docs (v1.1.8) By default, md-menu will attempt to align the md-menu-content by aligning designated child elements in both the trigger and the menu content. Which implies that the menu will line up as desired to the div which wraps the button,icons, and name even if I didn't already have the md-menu-origin attribute.
What would cause a zoomed tablet to cause the menu to open in the wrong location?
<md-menu-bar>
<md-menu hide show-sm show-md md-offset="0 9">
<div
class="md-icon-button"
ng-click="vm.openMenu($mdMenu, $event)"
aria-label="Open portal menu"
md-menu-origin
md-menu-align-target
role="button"
aria-label="Portal menu"
>
<span class="fa fa-user-o"></span>
<span class="user-name" ng-bind="vm.userName"></span>
<span class="fa fa-caret-down" ng-if="!$mdMenuIsOpen"></span>
<span class="fa fa-caret-up" ng-if="$mdMenuIsOpen"></span>
</div>
<md-menu-content layout="column" layout-align="start stretch" width="3">
<span>Portal Menu</span>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
Check with css property set for the same.
Use position to two elements and set z-index to the two elements on which opened dropdown is getting overlapped.
Example:
(parent element)
.class1 {
position: relative;
z-index: -1;
}
(child element)
.class2 {
position: absolute;
z-index: 16;
}
Once, check with this. This answer is from CSS point of view.
I have a pretty basic request regarding archilogic with the 3d.io appeditor.
I need to add the floor plan button in the lower left corner to this space:
https://spaces.archilogic.com/model/Panoraman/hvaj2t1s?modelResourceId=375c42b6-dd27-4e13-94f9-a822b4d31f15
Does anybody know I must add for the button to appear and how to set the view point?
Much appreciated.
It looks like that particular icon is not in the default appcreator css. You can add it by customizing the camera mode menu a little bit, e.g. like this:
<div class="camera-mode">
<div class="btn camera active"
onclick="document.querySelector('.waypoints').classList.toggle('hide'), this.classList.toggle('active')">
</div>
<div class="btn bird"
id="btn-bird"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:7}, rotation:{x:-60}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
<div class="btn person active"
id="btn-person"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
<div class="btn floorplan"
id="btn-floorplan"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:10}, rotation:{x:-90}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
</div>
</div>
and adding some css for an SVG icon
.btn.floorplan {
background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-black.svg)
}
.btn.floorplan.active {
background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-blue.svg)
}
Demo here
For optimal results, adjust the position parameter to your model and host the icon-floorplan-black.svg and icon-floorplan-blue.svg icons somewhere, that link might not stay up forever
I applied material design to a series of div's that represent links in the sidenav panel.
My problem is that the ripple click effect is being applied too broadly, hitting not just the content of the div, but also its parent, md-item-content, element.
md-ink-ripple attribute is being applied once, as an attribute in the HTML, as seen below.
I have played around with the location of the ripple attribute, both upwards to its grandparent, md-item, and downwards to the child <label> element, and it seems like no matter where I place it, it continues to ripple through the same md-item-content element.
EDIT- I think I have this problem solved via switching out the target tags to be md-item-content, instead of div. Leaving this up for posterity, and for any interested parties to give 2 cents.
<md-content>
<md-list>
<md-item ng-repeat="item in data.exhibits" id="toc-item-{{::$index}}">
<md-item-content>
<div class="toc-indices">
<span>{{::$index + 1}}</span>
</div>
<div class="md-tile-content exhibit-link" md-ink-ripple ng-click="goToSection($index, -1)" ng-class="{'md-item-active': (data.currentExhibitIndex === $index)}">
<label>{{::item.title}}</label>
</div>
</md-item-content>
<md-item-content ng-repeat="section in item.sections">
<label class="md-tile-content exhibit-section-link" ng-click="goToSection($parent.$index, $index)" id="toc-item-{{::$parent.$index}}-section-{{::$index}}" ng-class="{'md-item-active': (data.currentExhibitIndex === $parent.$index && data.sectionIndex === $index)}">
{{::section.title}}
</label>
</md-item-content>
<section class="clo-parts-divider"></section>
</md-item>
</md-list>
If you make the div position relative like this,
<div md-ink-ripple="#f5f5f5" style="position:relative"></div>
The ripple will stay within the div container.
-Source