Custom Module / RadListView/ Responsive Design
I have the responsive design module, but this doesn't seem to extend to showing data from a custom module. What is the best way to display a gallery basically, in columns and to have that collapse into one column when using a mobile device? Should I use tiles in RadListView, or just style li with float left, or is there another way? Is there a preferred method to use with the responsive design module?
Hello ,
Thank you for using our service.
I would like to inform you that this case has been transferred to our Sitefinity Sales Engineers. They will get back to you as soon as possible.
Thank you for you patience.
Regards,
Stefani Tacheva
Telerik
Hi Stefani,
No contact from the Sales Engineers. I think this was triggered because I download the Real Estate Trial, they thought I was a new customer.
Anyway the Real Estate demo did provide some clues you can group items in RadListView using GroupPlaceholderID="GroupContainer" GroupItemCount="3", etc., which is nice.
However you then need to style the item divs. I'm doing this by relying on Bootstrap for the Responsive Design. But can I use the Responsive Design Module, for this behaviour inside a template?
Hello David,
The responsive design module will transform automatically the columns to rows view (example) when there are layout elements (the widgets are dropped in that elements), so the layout elements will be transformed.
In case you need to change the view of a widget, you need to set the responsive styles in your site's css file.
The custom responsive style sheets file could be also added under your Responsive rules under
(Design > Responsive & Mobile Design) - screenshot
I hope the information above was useful.
Regards,
Svetoslav Manchev
Telerik
Hi Svetoslav,
I think it would be useful that Responsive Design can extent to widget templates with Predefine Styles.
So I should be able to set say "div class="ResponsiveColumn1" and this should have predefined styles and rules just like layout columns. And I should be able to configure these in the Responsive Design module without having myself to use CSS. Just like I can with normal layout columns. If that makes sense?
Hello David,
You can use such functionality using Feather, where Bootstrap, Foundation and SemanticUI packages are available:
More information is available here:
- https://github.com/Sitefinity/feather-packages/tree/master/Bootstrap
- https://github.com/Sitefinity/feather-packages/tree/master/Foundation
- https://github.com/Sitefinity/feather-packages/tree/master/SemanticUI
Regards,
Svetoslav Manchev
Telerik