I have a container with a card layout(horizontal). Each card is a scrollable component (vertical).
I want to edit the identificaition of each of those two type of scroll, because it actually allow to do Diagonal scroll and I do not want that at all
How do I do that?
I can't find anything in the doc that would allow me to do that.
PS I don't care if I have to work in private classes
Aught to be able to use the scrollable config.
scrollable: {
direction: 'horizontal'
}
If you are dealing with a lot of card items see the defaults config as well, might save you some typing!
If that doesn't work please post some code and I'll try to get you an example.
Good luck, Brad
Related
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.