How to activate scrolling using React Autosuggest (like the fourth example http://react-autosuggest.js.org/) ?
I can't get the option to do that in Documentation.
Actually, it was quite straight-forward :
.react-autosuggest__suggestions-list
{
max-height: 200px;
overflow-y: auto;
}
Defining a static height and adding overflow-y to auto was the solution to my problem.
Related
The context:
Short explanation why I'm even asking this. I have a React App with Redux.
I have a component that shows a List of Chat Rooms. I also have a Appbar from Material UI with a position of sticky. Also the list of chatRooms is sticky so it sticks to the left side, without scrolling with the list of chats in the middle.
This won't work ofc because the list of chatRooms will hide behind the AppBar or better said, overlap with it. So I need to set the top value for chatRooms according to the AppBar's height.
The question:
My idea was to add useDimensions hook and measure the height of the AppBar. I need to pass a ref to the appbar. And then set the top value of chatRooms equal to this height. But I can't pass this directly to the component. So my question is:
Can I store the ref in redux store, or is it considered bad practice? If so how to solve this problem?
Don't store a ref in your redux store, there are better ways to fix this problem. I have a layout similar than yours and it works with css only. You should avoid sticky because of this overlap problem and use a css grid instead.
Here is my css, as you can see there are no sticky, but just a full page grid:
/* Main grid container (2 columns, 2 rows) */
#root {
height: 100%;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 56px 1fr;
}
/* Top App bar, height=56px */
header {
grid-column: span 2;
}
/* List of chatRooms, width=220px */
aside {
overflow-x: hidden;
overflow-y: auto;
}
/* List of chats */
main {
overflow-y: auto;
}
If you want this grid to fill the whole page, then you need to add:
html { height: 100% }
body { height: 100% }
I want to test Polymer applications with non-Shadow-DOM capable browsers like Firefox, PhantomJS, and maybe others using WebDriver.
WebDriver commands for Firefox and PhantomJS fail when I use something like
driver.findElement(const By.cssSelector('* /deep/ #some-div'));
Are there some rules how to best translated/approximate these selectors when the polyfills can not be applied:
/deep/
::shadow
:host()
:host-context()
:content
I would like to create a function that translates such selectors automatically to non-shadow-DOM selectors for browsers that don't support them before sending the request and for that I need to know how to translate them.
Question is a bit old, but in case you haven't figured it out yourselves yet.
/deep/ (deprecated): As you said in your answer, just removing it should work in most of the cases.
::shadow (deprecated): Can also just be removed. Replacing it with > might not work if node which you are targeting is not an immediate child of host element's shadow root.
:host() pseudo classes is used to select custom element from inside shadow-dom, in non-supported browsers it will be equal to selecting parent from child element. Since we don't have parent selectors in css and you are writing js for conversion, you can identify tagName of host element and use it instead of :host selector. Something like below:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
:host-context(<selector>) pseudo class matches the host element if it or any of its ancestors matches <selector>. for example:
Below rule will apply on custom element only when it's a descendant of an element with the class .different.
:host-context(.different) {
color: red;
}
<body class="different">
<x-foo></x-foo>
</body>
It won't be very easy to replace this one with anything simple. Even webcomponents polyfill doesn't attempt it. I can't think of any css only way to achieve this.
::content targets distributed child nodes of host element, i.e. all elements which are picked to display using content selectors. Replacing ::content selectors with tagName of host elements should work here. i.e.
::content > h3 {
color: green;
}
/*replace it with*/
x-element h3 {
color: green;
}
Note that I have removed child selector > also from above, because in non-supported browsers after distribution h3 won't be a direct descendant of x-element anymore. Given the way content selector is used, I'd suggest removing child selector also wherever available.
/deep/ can just be removed
::shadow can be replaced by >
don't know about the others yet
I'm having an issue with boostrap3 and it's default background: transparent !important; print setting.
I have the need to show a heatmap in my webapp and have these printable.
I'm using an ng-style directive for that to dynamically calculate the needed background-color.
In short, this is the html part
<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>
and this is the controller part
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
};
However, because bootstrap3 sets all backgrounds to transparent with the !important keyword, I can't print these.
This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:
#media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
}
Since the inverse of background: transparent !important; is background: color hex code !important;
(see here )
I'm trying to set that using the ng-style, but then the exclamantion mark causes Angularjs to flip when I try this:
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) !important }
};
or alternatively when I try this in the html template
ng-style="scalecolor(10) !important"
Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?
For those who want to see this with their own eyes, here's a plunker showing the issue
Apparently you can't and it's a known issue but there is some workaround that can be found here:
https://github.com/angular/angular.js/issues/5379
The solution below has been copied from the site just in case the link breaks, or get changed.
You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.style property doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).
So, there are some workarounds here:
Workaround #1
<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>
This would be your best way to go in terms of browser-support, because the CSS property priority will get parsed correctly here.
Workaround #2
Alternatively, you can also do the following in javascript:
$scope.$watch(conditionalStyle);
function conditionalStyle() {
if ($scope.blue) {
$element[0].style.setProprety('background-color', 'blue', 'important');
} else {
$element[0].style.backgroundColor = '';
}
}
Where $element is a jQuery/jqLite object referencing an HTMLElement.
Note: caveats are not supported in IE < 9 so workaround #1 is probably your best bet for this behavior where you depend on property priority...
Using the tips for #Wawy I updated my code to get it to work.
For anyone landing on this page, for clarification I made an updated Plunker that can be found here
In short, this is now the html part
<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>
and this is the controller part
$scope.ngAttrScaleColor = function(perc) {
return 'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
};
Here is my MainView:
Ext.define("Test.view.Main", {
extend: 'Ext.Panel',
config: {
cls: 'transp'
}
});
Here is (the relevant part of) my app.css:
/* line 3, ../themes/stylesheets/sencha-touch/default/core/_reset.scss */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.transp
{
background-image: url(http://support.sencha.com/assets/images/logo-sencha.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I know it recognizes the class because when I set the opacity to 0, the gray background of the mainview isnt displayed. Can someone please help me? I am at a total loss.
Try using !important in your CSS property.
FWIW, this didn't work for me.
I have a form panel w/ Sencha Touch and had to do this:
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
after adding TxPanel to the cls setting for the form.
Once thing in dealing with CSS that most people don't realize is specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
So if you have your background class .myBackground{ background-image:.. } vs sencha's .x-container .x-component .x-background{ background-image:..} sencha's class has more selectors, and a higher specificity, and will override your .myBackground class! Even if it is declared after sencha's css!
Anyway learning about specificity in depth helped me a lot with styling in sencha.
I'm trying to create a property grid with ExtJS. The problem I'm having is that the text is too wide for the column. Is there anyway to force text to wrap around and just create a taller row? Here's what I have so far: http://jsfiddle.net/lordzardeck/pLYt3/1/
Basically i'd like the title row to expand to read this:
A Reason for Spelling (Level B):
Teacher's Guidebook
is this possible? if so, how?
Just add this CSS:
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner {
white-space: normal;
}
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner,
.x-property-grid .x-grid-row-over .x-grid-property-name .x-grid-cell-inner {
background-image: none;
}
.x-property-grid .x-grid-row .x-grid-property-name,
.x-property-grid .x-grid-row-over .x-grid-property-name
{
background-position: -16px 1px;
background-image: url("http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/themes/images/default/grid/property-cell-bg.gif");
background-repeat: repeat-y;
}
Use customEditors property of the grid.
See your updated example.
Setting white-space: normal; causes rendering issues when scrolling, using ExtJS 6
You should set cellWrap: true on the column, as pointed out by this thread:
https://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand