I'm having trouble making OC2 responsive. I'm running:
Drupal 7.32, Owl 7.x-2.x-dev, Jquery 1.10.
I defined a custom carousel setting with these values:
Responsive 1
Width 0; Items 1
Responsive 2
Width 480; Items 2
Responsive 3
Width: 768, Items 3
Oddly, the owlcarousel section of jQuery.extend statement lacks the above responsive settings, but has all the other owlcarousel settings.
The slider is set to autoplay. The slider works but always displays 3 items (which is what the first Items value is set to at the top of the OC configuration page. I have rebuilt the view and cleared caches multiple times.
Am I overlooking something obvious?
When using the 2.x branch make sure you clear your cache after updating the responsive variables in the admin section.
Related
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
Using Angular ui-grid latest version (4.0.0) having 6 columns and it displays correctly on laptop/desktop(Big screens) but displays very badly in small screen devices(Mobile phones), data get cut with (...) and columns display one below the other. Anything to fix it?
We already using the columnDefs with column width in % but it was not coming, though, I have figured it out actually parent div was given 100% width so it's taking viewport width and adjust grid accordingly but when parent width removed its works!!!
All is in the title.
I can't find how to configure the width of the slides.
<div class="slick__slide slide slide--5 slide--grid slick-slide slick-cloned slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1" style="width: 263px;">
The config on admin/configuration/media/slick doesn't affect the size of the slides.
Any help ?
It might be a different setting on the view that clash with the settings from the module, or maybe the container div has a CSS rule so it might not go full width ? (I'm just guessing here)
I had few issues with the slick drupal module,
what I did was to use js instead
The solution is the configuration of number of slide to show (Administration/Configuration/Media/Slick carousel>>list>>settings>>Slides to show)
But in Administration/Configuration/Media/Slick carousel
I couldn't access first to the entire configuration (trouble with slick admin CSS) unless in the tab UI I disabled the option "Enable Slick admin CSS".
And also I used the settings X carousel of the slick example.
I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example:
<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown" options, or "small-drilldown", it targets all media queries. I know that I could call two instances of wp_nav_menu, with show-for-small-only and show-for-medium-up, but I wonder if I can achieve this without printing two equal menus.
You just need to add the responsive class that tells the menu to be horizontal from medium and up, like so:
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
Update: The bugs related to the dropdown arrows and submenu fold out direction in the responsive menu have been fixed in the release of foundation-sites 6.2.0.
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...