I'm new to Office UI Fabric. The Pivot component doesn't seem to behave responsively by default. What would be the recommended way to deal with the Pivot component on small screens? I couldn't find any wrapping features. I tried to figure out if other components like OverflowSet & ResizeGroup could help. However, they don't seem to be the right solution for the Pivot either. Any suggestions are welcome.
I don't think the pivot was ever intended for responsive scenarios (there certainly isn't behavior baked in). But you could use ResizeGroup to modify your pivots if they don't fit. You might truncate text, reduce padding or switch to a dropdown.
Switching to dropdown might be the best idea. Just have a flag in your data that says "renderAsDropdown" and your reduceData just flips 'renderAsDropdown" to true, and your 'onRenderData' just renders a dropdown or a set of pivots. No need to calculate some breakpoint.
Related
I'm learning Vue and Vuetify right now. And I want to develop a Calendar tool combining Vuetify with Laravel.
With v-calendar it is possible to render multiple 'event-indicators'
See example
With Vuetify 'one' event indicator is possible (example), but I don't know how to manage to make it two or even three. Is there any solution for this?
Yes we can, just pass an array for all the colors you want to assign on a particular date, using the allowed-dates prop. It has been included in the vuetify examples as well.
Refer: https://vuetifyjs.com/en/components/date-pickers/#date-pickers-events
Yeah had a play around with it but doesn't seem you can get it to display multiple events as it is :( You can submit it as a feature though here and they're usually quite quick to respond if it's possible or not. Sorry I can't help any other way.
My problem is the next:
I have a table in which I store information, by clicking on a row there will be a window in which I show that information in a certain format.
The problem I have when I try to make the table responsive because when trying to see it on small devices I have to do side scroll. I tried to hide columns with "display: hidden" but the data I can not retrieve, beacuse it not exists.
How can i do this?
Do yourself a favor - do not reinvent the wheel and use a specialized library, for example Datatables. At the very least, take a look at how datatables makes the table responsive.
You have not mentioned it, so I assume you are ok using jQuery, Bootstrap 3 or 4, Semantic UI or Foundation. For React / Angular there maybe other options.
Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
I wanted to use bootstrap switch without having the white space (data-text-label) between both data-on-label and data-off-label options. And I could probably sort this out but I must move on to other stuff due to dead-lines for the project i'm working on.
I would apreciate a lot if anyone knows how to achive this and shares it whith me.
I am pulling the answer out of your question and putting it here to help future visitors.
This can be accomplished with a few changes to the switch CSS
label width:0 the main child div width:200% and the options spans with width:50%.
In asp.net the DataGrid supports templates. You can provide your own template and have the grid fill the data in your template.
With Dojo Grid, it seems like I can't make my own template outside of the the rigid simplistic cell style grid that Dojo provides.
Does anyone know a way to use a custom template with Dojo Grid? Specifically, with Dojo you're forced to use a cell that corresponds to a data item. I'm looking to use a table as a template with any styling that I choose (rows,columns,rowspans,colspans, more than one data items in a single cell, etc).
Any clues please?
Thanks
Firstly, it sounds like everything you want is available by customizing the grid. You can do nesting of cells and even have things like Filtering Selects in rows. Unfortunately the docs on this are not awesome so it takes Googling and trial and error if you want very customized features.
Secondly, because of the OO nature of Dojo you can always use inheritance to create mixes of various widgets. Specifically the _templated class allows you to specify an HTML template for your widget, which themselves can included templated widgets.
If that sounds non-trivial, you're right, which is why I would suggest digging deeper into the Enhanced grid and probably open up the code before trying to write something yourself.
I can tell you that I struggled getting it working correctly, but I have hence been pleasantly surprised by features that I needed that I thought I would need to build myself but were built into the grid.