I have two stackblitz examples, the first with horizontal slides and then I change them to vertical slides.
When I make this change, the height gets blown up to something very large.
Any help understanding this?
Here is the stackblitz link that works with horizontal slides link - working
Here is the stackblitz link with vertical slides link - css alignment is off
The only difference is I've changed
direction: 'horizontal',
to
direction: 'vertical',
in the config here
config: SwiperConfigInterface = {
observer: true,
observeParents: true,
observeSlideChildren: true,
direction: 'vertical',
threshold: 50,
spaceBetween: 0,
slidesPerView: 1,
centeredSlides: true,
slideToClickedSlide: true,
pagination: this.pagination,
};
Your wrapper has height auto and swiper library calculates height by itself.
Specify boundaries for your wrapper and it should be enough:
.card-body {
height: 200px;
}
Forked Stackblitz
Related
I have a problem with the owl carousel slider.
When my html page opening tag is: <html> , the slider works fine and I can see the images.
But when my page opening is: <html dir="rtl">, the slider is not working, I mean I see arrows, and pagination but not the pictures itself:
here is my code:
$("#owl-demo").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
any help please ?
Put this code in css file
.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
No need to manually add custom CSS rules anywhere (especially that direction: ltr)...
Owl Carousel v2.3.4
$('.owl-carousel').owlCarousel({
rtl:true // add this to the rest of the options
});
After adding that, Owl Carousel automatically appends an 'owl-rtl' class to the carousel HTML element, and then the plugin's CSS rules will automatically trigger rtl functionality.
You should put
direction: rtl
// maybe even
text-align: right // not sure if necessary
on the parent element of the slider.
This should do the trick.
solution 1: Please try this js Code
$('.owl-carousel').owlCarousel({
rtl:true,
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
solution 2: Please try this css Code
.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
In your JS, just put rtl: true. It worked for me.
$id.owlCarousel({
items: 1,
nav: false,
dots: true,
autoplay: true,
rtl: true
});
if you are using owlCarousel then only add this rtl: true, in js file .
$('.hero-slide').owlCarousel({
items: 1,
loop: true,
margin: 0,
autoplay: true,
nav: true,
dots: true,
rtl: true,
navText: ['<span class="icon-arrow_back">', '<span
class="icon-arrow_forward">'],
smartSpeed: 1000
});
I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
I have a grid inside my viewport. Code is as shown below.
By giving a fixed width to my grid, I do not get a horizontal scrollbar for my grid. autoScroll = true dosent help either.
If I remove the fixed width given to my grid or give a layout fixed to my viewport I am not able to resize my grid columns.
I want to be able to be able to resize my columns at will and also need an horizontal scroll bar.
Columns are added dynamically and minWidth, flex and maxWidth have been set for each of the columns
What can be done? Please help
Viewport.js
Ext.define('MyView.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:['MyView.view.gridPanel'],
layout : 'fit',
items:[{
//width:7000,
xtype:'gridPanel'
}]
});
gridPanel.js
Ext.define('MyView.view.gridPanel', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
alias: 'widget.gridPanel',
id: 'tests-view',
name:'graphPanel',
title: 'Tests',
emptyText: '',
store: 'MyView.store.settingStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'MyView.store.settingStore',
dock: 'bottom',
displayInfo: true
}],
filters :[],
//features:[],
enableLocking:true,
columns:[], //Columns are loaded dynamically
viewConfig: {
stripeRows: true,
plugins: {
dragGroup: 'user-dd',
enableDrop: false,
ptype: 'gridviewdragdrop'
//forceFit:true
}
},
columnLines: true,
frame: true
});
Scroll doesn't appear, because you have set grid width to 7000px. Usually scroll appears in grid when columns width is greater than grid width. Use layout to fit grid in parent container, or adjust its width, and then scroll should appear.
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.