In a fluent card, if I place a select element with a dropdown and the height of the dropdown menu is larger than the card, it will extend past the card.
If I have an absolute positioned flyout, however, the content is still fixed to the card and is largely inaccessible.
Is there a way to mimic the behavior of the select dropdown for flyouts?
See this sample, ideally the absolute positioned popup will behave similar to the volvo select:
https://stackblitz.com/edit/mgt-ts-next-starter-9exxfa?file=index.html
Related
The v-navigation-drawer has a very nice expand-on-hover functionality; here the expanded layer is displayed atop of the content; i.e. the content is not resized. Now I would like to have the same behaviour on click; but if I just manipulate the mini-variant property then the content gets resized (the layer moves the start of the content).
Now I found out – by complete accident – that I (kind of) get the behaviour I want by setting the width property (of v-navigation-drawer) not to a number (like 224 or "224") but to a string containing the number plus a unit (like "224px").
To me this actually seems to be a bug. Is it? If so: is there a proper way to achieve the same result?
I am working on a Qt-UI with PyQt and found this nice snipped to create a custom collapsible box widget here: How to create collapsible box in PyQt
I have just replaced the internal QScrollArea by a QFrame.
It works perfectly, as long as the content of the layout that is added stays the same.
However, I allow the user to add or remove widgets from that layout dynamically during use. Here I need some help. I am adding a Grid Layout with, say, 3 widgets inside there (initial creation of the box with .setContentLayout) and once the user adds a 4th widget:
the layout is compressed and keeps its original size
all widgets inside are compressed to fit in the newly created one
overall size of the collapsible box is kept constant.
I have played with various options like updateGeometry() on the content_area and all surounding widgets. It seems I don't fully understand what this code does, I am not really familiar with these animations yet. My best guess is, that the animation somehow blocks the update of the height of the collapsible box, causing the layout to be compressed.
I would be really happy for a pointer where to look / what to adjust to get the size of the collapsible box reacting to the size of the containing layout.
Thanks!
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm trying to create a live tile for my application, using a user control.
The user control contains a grid, an image and a rectangle filled with color.
Now here comes the funny part.
I want the rectangle to act as a background for the tile's title, and the image to fill the rest of the tile. And i said to myself, well, lets put some rows in that grid and set the like you usually set them in a WPF/SL application.
I then write the entire thing in a WBM and save it to isostore.
The problem is, the parser seems to ignore the presence of grid's rows. regardless of what I try, the rectangle is not shown, and the image covers the full tile, when it should only cover the first row. It is as if the grid didn't even existed.
Another funny aspect is that it doesn't matter if I use rows or columns, the result is the same.
Any ideas?
Are you using the following method?
Dynamic LiveTile - adding background image?
I recently implemented a Live Tile using a Grid with Rows and Columns for layout of some TextBlocks. I encountered similar challenges, so I placed the control that I was using for my Live Tile on a blank page in my app to better see what was happening. Does the control render correctly when displayed on a page (versus being rendered to a WriteableBitmap)?
Another idea. Instead of trying to position the Rectangle relative to the tile's Title, why not leave the Title property blank and put the same text in a TextBlock within the user control?
If you are careful about the font and positioning of the TextBlock, the text on the resulting background image can appear indistinguishable from text displayed from the Title property. I decided to follow this strategy myself. I found the font information in the following answer:
Font size and family for a tile's title
Otherwise, could you post an example of the XAML you are using?
I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.