i need to get this component opened by default without loosing the open closed default behavior.
What is interesting is that they to this in the example of the documentation, but when you copy paste the code under the "code" tab, it is closed by default.
https://headlessui.com/react/menu
Thanks
I managed to get the component opened by default by adding static as stated in the doc + adding show={true} on the transition component but with this solution, i cant close it.
I was expecting some prop like default={'open'} but i can't find it in the documentation
Related
Recently, I have been trying new next 13 app directory using styled-jsx as a styling option. Soon after that I came to a contant warning conserning styles:
Error: This module cannot be imported from a Server Component module. It should only be used from a Client Component
Yet according to styled-jsx docs, it should work on both client and server side. So, what am I missing?
My guess is that next 13 is by default renders on the server side, whereas styled-jsx in its nutshell supports only client; cause as soon as I set "use client" at the start of the file, the problem disappears.
I'm having exactly same problem and would def want this to render on the server rather than using use client.
Putting styled-jsx away until this is somehow sorted.
EDIT: There is a description how to use styled-jsx here: https://beta.nextjs.org/docs/styling/css-in-js
I am using Nextjs with Material UI and Material UI CSS doesnt load properly on first page load like the picture
wrong look like this on first visit
correct one with correct style after a page transition
(there are alot of other instances for example elements like header with fixed position are not in their place etc ... )
but when I transition from one page to the other or even trigger a setState command everything goes to its place and CSS gets applied. I think this is because of class name mismatch between server and client I have applied the _app and _document from this link and the issue still persists.
so there is only one option for me and that is to add a Twitter or Instagram like first page load into the site so if this is the first visit it gets showed to user then because of call to set some state everything shows properly. So how can I detect in nextjs if this is the first page visit from a user into the site and I dont want to use the context provider cause then I have to add the consumer to every page and the site has alot of pages
is there any workaround or solution for this problem I have been searching for an answer for weeks and I have asked the creators of Material UI and they said that with some upcoming upgrade it will get fixed but untill then what should I do ?
After so many days I noticed that in my _document.js file I have
import { ServerStyleSheets } from "#material-ui/styles";
I changed that to
import { ServerStyleSheets } from "#material-ui/core/styles";
and after that CSS got applied and I got rid of the flickering problems
tl;dr Demo of Issue
I'm attempting to integrate Ace Editor in an iframe via React 16. I am using the react-ace component library, though this issue exists if I implement the editor natively as well.
Although everything mostly works when I wrap the editor in react-frame-component, I cannot select highlight text which makes the editor unusable. I suspect this may have to do with the fact that react-frame-component is implemented with Portals, but I'm not sure exactly what the issue is.
I've replicated the issue here. I don't think this problem exists if I loaded the component with a regular <iframe src /> from another domain.
react-frame-component keeps the code in the parent window, and adds elements into an iframe, which confuses mouse handling code in ace to add event listeners to a wrong document
adding var document = el.ownerDocument before
https://github.com/ajaxorg/ace/blob/v1.4.10/lib/ace/lib/event.js#L111 would help.
I am new to Adobe CQ5. I have downloaded Google Map components. But i dont know how to make the component to appear in sidekick box.
Please any one suggest the link or the steps to install the third party components.
Thanks in advance.
As #VAr has suggested, you will first have to create a component in CQ. For any component to appear in Sidekick it has to have either have a dialog or a cq:EditConfig type of node and name of cq:editConfig, do mention a component group while you create a component.
Once you have this configuration ready, you will have to edit the jsp of component.
Now, go to design mode using sideKick and find the component group in which you set while creating the component. Click on the checkbox next to the component you created and component will appear in sidekick.
You will find the component either in Other group or in the component group. If you find the component in Other group that means that the component group in which you placed your component does not contain at least 5 (don't remember exactly) components.
Hope that answered your query.
Following are the steps i have followed to embed the googleMap component.
Create a component:
Create a dialog:
go to the URL
http://www.embedgooglemap.com/
Generate the code with CreateMap
Copy and paste the code in to the newly created component JSP.
Make sure that if any component Group (if you have) is enabled in the Design Mode.
Drag and drop the component into the page from sidekick.
I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.