I found how to make a vertical Accordion in Metro UI.
But I would like to make a horizontal one.
Is it possible? If so, how do I proceed please?
if I understood correctly then in the link you provided by adding the following css to the first div.cell:
.cell{width: 100%;}/*the div container containing the frame classes*/
.frame{float: left;}
.frame .heading, .frame .content{width: 200px;};/*you can choose the width you prefer but I guess they have to be the same width*/
you will get something like this:
You could also enable overflow in the '.frame .content' class if need be. Hope it helps.
Related
I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)
I'm not able to get my ngbPopover to show up in a table's td element. I'm seeing lots of questions but no clear solution as to how to make this work in my Angular 5 application.
I can see that my method to return the popover text is being called, but the popover never actually appears.
Problem: I have got similar problem, My NgbPopover is in <td>, when I click, popover is not visible but dom expands.
Solution: What I figure out by inspecting element : find this element named "ngb-popover-window" and remove style property, and my popover is visible then. I don't know how to handle that in project, Probably overriding some css, I guess.
My Sample : removed style element from below shown code.
<ngb-popover-window role="tooltip" class="popover bs-popover-top" id="ngb-popover-0" style="top: 114px; left: 885px;">
Hope this helps!
I'm wondering if CSS alone can perform the following effect or if I need javascript? Here's a video demo of what I mean
https://www.youtube.com/watch?v=HhJgoT7C8XI
Notice how the text slides up and has as "squish effect"? The line items at the top change from a big line-height to a small line-height faster than the lines at the bottom. Can this effect be achieved by CSS alone? Or do I need javascript or a javascript plugin?
I tried to view the source code for the demo in the video, but I couldn't identify what's causing this effect.
Anyone have ideas?
I did achieve the squishing effect via CSS only by setting a different transition-delay: for each element.
Please have a look at http://www.bootply.com/133473.
I have at least a couple of problems and I didn't find any solution up to now...
First problem:
The leaflet map is 0px height and the next row is not in the correct position.
Second problem (but maybe it is related to the first one):
On a small device the width of the map is the full width but I'd like to have a margin and I wasn't able to get it (I tried but margin-left, margin-right and padding-left, padding-right...) and of course the text row is superimposed to the map and that's not what I want...
Looking at your bootply posting, it looks like your first problem was solved (I see the map so the height must not be 0px).
As for your second problem, it is the Bootstrap Editor that is not able to show your app on smaller screens. This problem may go away when you view your app on its own web page.
I've got theme transitions (entrance and content with a set offset) on elements which overlap. The issue is as theme transitions are bought to the front of the page the elements which are animated unreliably overlap each other causing a nasty transition when it is returned to the correct z-index.
It doesn't seem to matter how the elements are structured in the visual tree or the z-index applied to the element, the issue still occurs.
Any help very much appreciated - Ideally I want to avoid writing storyboards though, I'm happy with the entrance/content transition in this scenario!
I ran into a similar problem myself. Here are some things you can try:
make sure the "correct" z-order observed at the end of the animation is indeed correct. Putting some label on your items should make that clear if the items have the z-order you intended
make sure the items are are added to the control according to their z-order. In case you use binding make sure the items you add to the collection are arranged by their z-index
in case you are using PrepareContainerForItemOverride make sure the logic around your binding is correct
Hope it helps,
Mihai
I decided simular problems with:
Position: Relative;
Transition: All... (All includes Z-Index)
I made Z-Index:4 and for "HOVERed" elements Z-Index:2000.