I want to style ng-container like add borders when on hover or show a button inside this tags on hover but this isn't possible. ng-container doesn't seem to be responsive to styling. Is rendered on DOM and if not what can I use to access it?
According to Angular official docs <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. It's only meant to be used as a container for structural directives when you need some HTML elements immediate children to be of a specific type. For styling you would have to go with regular elements instead.
Related
Should hover:scale e.g. hover:scale-125 work on <a> elements when using tailwind CSS.
I'm running a Django project... it works on <div>'s <img>'s and other elements but not on <a>...
It that how it is or is something wrong with my tailwind css?
Thanks!
tested this scale on other elements and it worked, but it doesn't on <a> elements
Anchor tag is an inline element and cannot be scaled
img is also inline element but Tailwind set display: block property on images in preflight styles
In order to take effect you should other display property - like inline-block, block, flex etc
See DEMO
I have included the child component in parent component. and I displaying that child component within col-md-8. What I need is, I have to highlight the child component's particular div with some extra text to equal to parent component. Like I added that image below.
layout example
In this image. You can see that, child component's layout. That green box width and height should be like that. I don't know how to do this. any suggestion?
I tried to change the css using #Input() #HostBinding decorators. but it is only change the inside of the child element.
you can use template reference variables in the way
<child-left #childLeft></child-left>
<child-content [style.height.px]="childLeft?.offsetHeight">
</child-content>
But really I don't understand so much your image :(
I want to show a popup with content in random websites.
The popup is a div I create and the content is coming from an editor with its own CSS.
Since I dont want the site CSS to effect the look of the popup I have some css to reset general things like table width inside the div that runs before the div content css.
The problem is what to do when the site uses !important on some general css like table width. I know I can add !important to the reset css so table width will reset inside the div but the content includes html/css I take from the editor which doesnt include !important. so adding !important to reset the site CSS will kill also the content CSS.
Any solution to this dreadful situation?
Im having problems with superfish menu displaying inline with "responsive design" I would like to have all superfish menu links displayed inline but im having problems that superfish for submenu override all styling that i tried and always display dropdown.
Anyone know how can i disable superfish animated dropdown on mouse hover when im browsing with less than 700 px device and display all elements inline-block of superfish menu elements, submenu and submenu elements.
Current code from website is too messy so i uploaded it here http://pastebin.com/mwPjVEPX
This is directly from site.
For first ul li elements i added display:inline-block and it works but in submenu elements, first javascript from superfish add element style display:none and visibility:hidden, and when i try to add display:inline-block to override it on first hover it went back to display none.
And here is css of superfish menu http://pastebin.com/vmYkGVx4
First of all you didn't specifically mention your code here or any link. But as i guess, all the properties you specifies to a parent, they automatically appends to its child element.
So, If you give display: inline; then its all children will get it and behave as if they are inline. So It is better to go display: inline-block;. In this case this element will behave as an inline element but itself showing as a block level element. And child will never be inline .
Despite your CSS, the Superfish JavaScript continues to run at small screen sizes. JavaScript hides and reveals things by attaching an inline style attributes to alter the CSS display property. Inline styles will always trump CSS from any other source unless you add the !important keyword like so: display: inline-block !important. That will be worth trying. However, as the JavaScript will still be trying to act on the elements, you may still find other weird behaviour arising. Please let us know how you go.
Well at the end i ended up using mobilemenu . It's javascript code that on selected width hide superfish menu and display dropdown select box. From all searches it's most reasonable to use. There are some developments on superfish menu to support touch devices but still it's not supported for "responsive design" although there are posts on various blogs talking that next step is to make it responsive, untill than i used this addon https://github.com/mattkersley/Responsive-Menu
I know how to use background images and their position on an anchor element (using :hover). It's my understanding that ie6 doesn't support button:hover. How can I achieve this effect using only css?
IE6 only supports the :hover pseudo class on anchor elements. That means, just like everything else, you have to get a bit creative if you want to achieve this effect.
You'd possibly achieve a hack of this by starting with using conditional comments to include an IE6-specific style sheet for your page / site.
You could then either use a background image that looks the same as your button's background and set an anchor tag to use that background image with the image's correct fixed width, or (untested so not sure about this one) try wrapping the button in an anchor tag.