I have problem with changed icon in this component:
https://headlessui.com/react/popover
When I setup custom icons from herocions, my icons look like:
a - orginal
b - my icons
My code is bellow:
https://codesandbox.io/p/github/mxcdh/codesandbox-react-tailwind-geadless-ui-popover/draft/vigilant-meninsky?create=true&import=true&file=%2Fsrc%2Fcomponents%2FHeader.tsx
What I should to do? And when is bug?
Related
I have a logo header issue - where in mobile I want the padding to be 16px - but in desktop padding to be 128px.
<header className="p-sm md:px-xl">xxx</header>
but the desktop version is still showing the mobile padding?
I can see a file where the override looks correct called globals.css -- but then I see p-sm override in another location under <styles>
its the way that next/document is being used to integrate the head - something has created various inline styles that override the tailwinds css
update
so we have made a UI lib on its own repo with tailwindcss -- and recently replaced the UI components on another repo (also its tailwindcss defined) -- I think what's happened is when we swapped over to the UI lib components which is its own node module -- it replicated the tailwindcss twice -- there is an override happening that is knocking the styling off.
It looks like you're using the wrong syntax when defining your screens.
You shouldn't use md- or lg- when creating a responsive design but md: and lg:.
Here's the documentation: Link.
Your code should look like this:
<header className="p-sm md:px-xl">xxx</header>
If you don't have custom sizing, you can use this code instead:
<header className="p-[16px] md:px-[128px]">xxx</header>
I am using ng bootstrap in my project. All I am stuck with doing is opening a modal. I read a similar thread but there, bootstrap css was not included.
I am following this example.
When I click the button to open the modal, modal gets appended in the DOM (visible when inspected using dev tool) but it is not visible on the screen.
I have included bootstrap css in my .angular-cli.json as
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Bootstrap css is also visible in styles.bundle.js when page source is viewed.
Edit 1:
When inspected, for ngb-modal-window opacity was set to 0. When I set it to 1, popup became visible. But position of the popup is not center. It is pulled to the top. Please refer the image:
you can include in css
#import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');
in 'styles.css'
in some cases ngx-bootstrap not works exactly as expected in angular 2/4.
I've faced the same issue when try to use ng-bootstrap with bootstrap 3. install ng-bootstrap-to-bootstrap-3 and follow the instructions saved my day.
I want to add a glassdoor icon. You can find my site at braunweiss.net. My theme uses fontawesome and it currently doesn't support a glassdoor icon. So I tried adding an image in place using the below code:
.social-menu li a[href*="glassdoor.com"]::before {content:url(http://braunweiss.net/wp-content/uploads/2017/07/glassdoor-2-1.png);}
However, it looks bad, it's not customizable, and it doesn't change when it is hovered like a font. I've read of using svg in inline css but cannot figure out how to do it. Here's where I got the glassdoor icon I used: https://materialdesignicons.com/ (scroll down, the icons are in alphabetical order).
Is there a better way to get the icon to show up? I can only customize css or add codes to my theme's php files on wordpress. Thanks.
Have you tried using an SVG?
https://github.com/FortAwesome/Font-Awesome/issues/6422 (SVG LINK IS IN HERE)
https://css-tricks.com/using-svg/ Icon SVG how-to.
I have converted material svg as font icons in my project using GULP, similar to custom icon fonts. Occasionaly, these font-icons are appearing jumbled/empty and on refresh, all icons are arranged properly in the site.
Example: instagram icon instead of apple icon
This happens occasionally and only in published site, why is it happening like this and how to solve this?
Note: After adding text-rendering:optimizeLegibility; in font css , this issue started.
Thanks
I am developing a one page website. I need a bootstrap "modal" class popup to show up when I click on a button. However the template I am using is done in Bootstrap Version 1. I need the "modal" popup to be in Bootstrap v3. Is there any way that I can make this specific part of the html body to use Bootstrap v3?
If I try to include the link reference to Bootstrap v3 at the top of the page the template gets messed up and unclean.
Please help....
Best solution, but not cross-browser
This is not supported by all browsers but you can use :
<style scoped>
#import url("bootstrap-3.css");
</style>
Put this in the modal container <div>.
Cross browser solution
Copy over the modal component from bootstrap 3 then remove the bootstrap 1 modal component (in the css).
Other cross browser solution
Rebuild your template on top of bootstrap-3.