I'm using highcharts-ng to display some chart. I now decided to add some animations to the application, but as I include ngAnimate as a module's dependency, I get some charts' layout messed up (they don't fit their container anymore). Is this a known issue? May this be related to my css of that particular part of the page? In such a case, would this mean there's some css class which is reserved for ngAnimate to work that I could have modified?
Is there a way I can verify this?
Thanks in advance!
Related
I work on an e-reader app that uses WKWebView to display text content from ePubs. How do I customize pointer behavior on iPadOS 13.4 and later in my web content? I'd love to be able to get highlight effects on arbitrary anchor tags! Are there CSS properties that affect this, similar to the existing pointer styles?
Can't say for sure, but the best standard for them to have leveraged would be PointerEvent. https://caniuse.com/#search=Pointer%20Event
Unclear how that would relate to the CSS and hover states, though.
We would like to work with the datagrid but we have an issue with the buttons in all our site.
Once Clarity is installed it is not possible anymore to make small square buttons.
In a kind of way the minimum width of every buttons seems to be overidden by something in your system.
Is there a way to seperate distinct components of the Clarity Design System ? Or maybe exclude some of them ?
Are you aware of this issue with button minimum width ? Do you know a way to prevent this behavior ?
Many thanks.
The styles for Clarity are bundled as a single unit, so you would have to build the styles yourself and only build the pieces needed for the Datagrid. Some details can be found near the bottom of the themes documentation about custom themes https://vmware.github.io/clarity/documentation/v0.11/themes. You'd have to go further by trying to remove everything else. Then you could just import the ClrDatagridModule from #clr/angular into your Angular application.
However, I cannot guarantee that you'll be able to avoid the button issue because the datagrid has buttons and we don't recommend building just isolated pieces of Clarity (we don't know how well it will work in practice).
You can always overwrite any CSS with your own to reset something like the buttons min-width property. We set some values like that to ensure that things are properly accessible for users, so I'm not sure exactly what your limitation is but probably the best thing to do is just override the Clarity styles when necessary.
Thanks for your help.
I managed to neutralize the button behavior by adding the following code to my css file.
.btn {
min-width: unset;
min-height: unset;
}
I have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the navigation bar in there could be a new block or part of the header block. What is best advised here?
I was hoping to find some example sites that implement this sort of thing to get a good understanding of it but up until now, I have found nothing that appears to demonstrate it.
I am also working under the assumption that the component should layout its elements, so this is great, a good candidate for flexbox. The problem I face now is laying out the component in the page. Imagine having to layout 2 components side by side, another good candidate for flexbox but knowing where to place the display: flex ? also wouldn't the component then be in charge of placing itself within the page by using flex item css i.e. flex-shrink, flex-grow, basis, order etc..
This means that the parent is dictating where to place itself on the page and it isn't 100% an independent block now as it needs a display: flex on its container.
I did find some info with regards to file structure and wondered if this was something that could help? Maybe I am not fully understanding it - could the directory Layout be used for this?
This site uses the BEM methodology with Flexbox included.
http://fantube.me/
All the answers are on the https://en.bem.info.
how to far I should be breaking down components (blocks)
https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element
it isn't 100% an independent block now
https://en.bem.info/methodology/css/#mixes
some info with regards to file structure
https://en.bem.info/methodology/filestructure/
I just started working with Polymer and their starter kit. I want to have a standard hero image with a text overlay - naturally, I want the image to be responsive. I've gone through all the Iron and Paper elements and can't seem to find anything that works.
I've tried using the Iron image, Flex layout, and Media queries in various compbinations to get what I need, but to no avail. I've found several 3rd party components like x-imager that will do the trick, but I would've thought such basic functionality would be available right out of the box like it is with pretty much every "responsive" framework - and yes, while I know Polymer isn't supposed to be a framework, I guess I expected it to be part of their component library. And yes, I also know I can create a simple CSS class that does that like Bootstrap does too, but I'm looking for native functionality, out of the box here.
Is there something I'm missing here or should I just create a custom component and move on?
I find Bootstrap insufficiently flexible. For example there's not a straightforward way to change font or line-height properties. I want a one-line method to change these properties.
What else can I use similar to Bootstrap (that I'm sure will not be as rich)? I just need some style collections that are flexible for those kinds of changes.
You can change all of the typography values (and pretty much everything else) on the Customize Page. The links are in the toolbar at the top of most pages of the Bootstrap site.