I have a mobile sidebar component that should be hidden on desktop. Since it's for mobile only mobile it has the className md:hidden.
I'm adding all my components to React Storybook to make a library of each component. But since it has that class of md:hidden it doesn't show up unless you change the viewport or the window size. Is there a way in Storybook to overwrite or take out that className?
I would like it to show up in storybook though, so I was wondering how to either remove or override that class only in storybook.
I think you got it backwards (Assuming you set the md:hidden intended for mobile). In tailwind, we use md (min-width:768) if we want the effect to apply when it exceeds 768px (not what we want if we want it to show in desktop view)
So right now, you are hiding your sidebar when it is in desktop view. Try replacing your properties with hidden md:visible. In this manner, it would default to hidden (when it's in mobile view) and once it reaches & exceeds the min-width of 768 (desktop view) it will show the sidebar. Hope this would help brother.
Related
I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.
NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.
The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.
What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?
If you need more information please don't hesitate to let me know. Thanks for any advice in advance.
This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.
I have a very basic implementation of ant design in a react project. I used create-react-app and have went through the suggested steps detailed in the antd documentation.
The problem i have is resizing the Content section of the Layout component. Currently, even though my Dragger component is wrapped within Content component, it is appearing below it. The Content component is represented by the Grey area on the screen. Attempts at resizing it using styling have not yielded desired results.
Here is the code pen. Im simply trying to ensure that the Upload box is located within the Content section, and not below it.
Any help would be awesome!
You've wrapped the Dragger component in a div that is absolutely positioned in the center of the body, so it's disregarding the regular content flow. If you remove that inline CSS it will behave as you'd expect.
On te Codename Designer I saw the Swith with a fine slider line, but when I use on a form, the circle and the slider are same Height.
¿how I must do to set the slider Height?
Switch on Designer
Switch on my Form
This is the difference between the styling of the Switch component in iOS and Android. They look different to match the platform native look. The designer lets you toggle iOS/Android native theme to see the difference.
You can explicitly override design styles in the Switch class to force a specific look. See: https://www.codenameone.com/javadoc/com/codename1/components/Switch.html
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
I m working on my mobile apps using codename1 and i found that after adding an autocomplete textfield to any form, every other component disapears along with tabs behind a white container.
It sounds like you are using a scrollable FlowLayout (which is the default layout manager) and some nesting behavior goes bad.
Another guess is that you add everything into the layered pane which is a HUGE MISTAKE, you should add everything to the form directly or content pane.