What's the recommended way to do this?
Here's an example of what I've done http://jsfiddle.net/T9QHw/56/
Normal dropdown on the left, and the div version on the right.
But the div acts a little funny. It closes itself if I click on it, and styles a tags as blocks.
Should I be doing this a different way?
Perhaps you want to be using the Popover component instead of the Dropdown component?
Related
when I use a KendoReact DropDownList into a ReactBootstrap Modal the expanded list appears UNDER the modal so it can't be interacted with.
I read several issues that was pointing to a focus loss, which is not exactly my case, due to the fact that Kendo PopUp was append to body instead of the Modal itself, and the 'appendTo' prop seems to be a good solution for me but it exists only for the Kendo PopUp component, not for the Kendo DropDownList one (which uses PopUp underlying)...
I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal
And a LIVE demo for this repo (take some time to load):https://react-kendo-dropdown-into-boot.herokuapp.com/
Set bigger z-index for the animation container of the popup using CSS. And it will be on top of the modal to resolve it.
.k-animation-container{
z-index: 10000
}
Leave it to be rendered into the document. Since if you render it using appendTo to the Modal, the DropdDown will not be entirely visible when opened, or scrollbar will appear in your dialog. This is the purpose it is rendered into the document.
#Xizario's answer didn't work with V4.14.x
The solution that finally worked was to use ZIndexContext.Provider from '#progress/kendo-react-common':
<ZIndexContext.Provider value={10003}>
<DropDownList {...yourProps} />
</ZIndexContext.Provider
I'm having trouble to get things right with the Bootstrap Dropdown. I can't use react-strap and reactbootstrap is not supporting bs4 yet.
What I want is that a dropdown doesn't close if if select an element and only if I click outside of the dropdown menu. I don't want to use jQuery and would like to stick to react. I was thinking of removing data-toggle="dropdown" form the dropdown element, as this seems to be the one that adds the show class to the dropdown-menu. After that I would try to implement my own logic, so that it follows my rules.
But still, because I hope that there is an easier/better way, I wanted to asked if anyone has any experience with that?
I have a Reactstrap Modal: Modal - Reactstrap
I would like to use this modal as a I would use a "normal" div in a page layout.
I.E. Show the modal inside the page with the same design, just without it popping in and out, and blurring the rest of the page.
Is this possible?
You will have to modify or override the CSS files of Reactstrap to achieve that. But it would not be a Modal any longer. It is better if you ask about what you want to achieve. You don't need to use modals to show a div with a toggle button.
I'm new to ReactJS and I really want to know what is the best practice for creating a Radio button style. Actually kinda like switching between tabs. For example, I have a layout like this one
When use click on each icon, it switches to its own tab.
I really want to know what is the best way to do instead of using pure radio button? Btw, the icon will have a image and div text inside of a div wrap. Thanks
The best way would be to have a component that is your tab controller. Then that component tracks which tab is selected, and will render the selected component
Effect I'm trying to achieve:
In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.
Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.
I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.
What I've tried so far
I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.
Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?
I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.
If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.
The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default (return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.
Use the pseudo class :focus instead of :active. You might also need to use tabindex="" in your HTML to make an element accept focus.
However, iOS touchscreens don't seem to recognize tabindex="".
It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla.org/en/CSS/%3achecked