How can I set if user scroll on listview, the other div outside listview no need to be scrolled too? I can't get any reference to do this out there.
Put your list within a DIV container. Give the container a max-height and make it scrollable:
<div class="listCont">
<ul data-role="listview" data-inset="true">
<li>item</li>
<li>item</li>
...
</ul>
</div>
.listCont {
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: 250px;
}
DEMO
-webkit-overflow-scrolling: touch; is the trick to make it scrollable on webkit touch devices.
Related
On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
I'm using the "navbar" data-role for a div inside JQuery Mobile's footer definition. When I add more than 5 items it divides the menu items into two columns. This is default behaviour according to the JQM documentation. I'd like the icons to be scrollable by swiping left or right inside the footer area.
<div data-role="footer" data-theme="d" data-position="fixed" id="divFooter">
<div data-role="navbar" id="divNavBar">
<ul>
<li>Profile</li>
<li>Status</li>
</ul>
</div>
</div>
For reference, I looked at this potential solution: JQM horizontal scroll navbar. It however turns the menu icons into HTML links and works inside the header data-role.
Any ideas?
What you need is the following on your parent div (on your footer div)
overflow: auto;
white-space: nowrap;
The nowarp makes the div contents not overflow to the next line and the overflow auto makes it scrollable in whichever direction it will not fit which in this case is horizontal since we turned off word wrap
You may achieve this with HTML/CSS only:
HTML
<header>
<nav role='navigation'>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
Menu
</header>
CSS
nav {
overflow-x: scroll; /* 1 */
-webkit-overflow-scrolling: touch; /* 2 */
}
ul {
text-align: justify; /* 3 */
width: 30em; /* 4 */
}
ul:after { /* 5 */
content: '';
display: inline-block;
width: 100%;
}
li {
display: inline-block; /* 6 */
}
Comments:
Setting auto will work on some devices, but set this to scroll just
to be sure.
This the magic property that enables the native feel
scrolling.
Setting this to justify creates equally spaced li's which
takes the headache of working out margins.
You must set the width to
a value larger than the sum of all the li's width.
This is text-align: justify's version of a clearfix.
This must also be set for the equal spacing to work.
Should work on the following devices:
iOS 5+
Android 3.0
Blackberry 6+ (didn't check personally)
Windows Phone (IE10) supports momentum scrolling natively
Taken from here: http://hugogiraudel.com/2013/08/23/scroll-overflow-menu/
I have the following collapsible content with jQuery Mobile. How can I stop the heading being shortened?
At the moment the text is cut off so it reads something like 'Really long heading...' Do I need to do this manually with css or is there a JQB setting I can change?
<div data-role="collapsible">
<h4>
Really long heading goes here thats wider than the page width
</h4>
<p>
Content Content Content Content Content Content
</p>
</div>
Here is the documentation
http://jquerymobile.com/test/docs/content/content-collapsible.html
It seems this CSS is causing the behavior. I could overwrite this rule if there isnt a standard JQM method for doing this.
.ui-btn-inner {
white-space: nowrap;
}
You need to remove this css:
white-space: nowrap;
from its inner span (span witch wrap's text). Or replace it with:
white-space: normal;
Or change jQM css file (.ui-btn-inner) but this will also effect every other element using this class.
Or use this line:
$('div[data-role="collapsible"] h4 a span span.ui-btn-text').css({'white-space':'normal'});
There's no other way, or at lease not buy changing some jQM UI element attribute.