Changing carrousel split-view heights

[alexandercarter]

Hello,

This is possibly a simple one, but I would like to change the heights of two carousel views. The first will always contain an image with a fixed height of 550px. Below the image, I would like to add a block of text with the usual HTML formatting. I have attached an image of the landscape view; in portrait, the image remains at 550px and the text simply extends to fill the remaining space, with the sidebar becoming a panel naturally :)

This is what I have at the moment, taken from the samples. The development inspector shows a height of 258px applied automatically to both horizontal and vertical views. I have tried to add a new height in HTML or modify the sink.css file in the "card" classes but without success.


items: [{
xtype: 'carousel',
items: [{
html: '<img src="photo.jpg" />',
cls: 'card card1',
},
{
html: 'Image 2',
cls: 'card card2'
},
{
html: 'Image 3',
cls: 'card card3'
}]
}, {
xtype: 'carousel',
ui: 'light',
direction: 'vertical',
items: [{
html: '<p>Voici les textes</p>',
cls: 'card card1',
}]
}]

Thanks!

[evant]

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 200,
html: 'Left',
style: 'border: 1px solid green;'
},{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
style: 'border: 1px solid blue;',
height: 500,
html: 'Image'
},{
style: 'border: 1px solid red;',
flex: 1,
html: 'Bottom'
}]
}]
});
}
});

[alexandercarter]

Fantastic, thanks.

[alexandercarter]

Hi,

I actually forgot to specify that the upper image is a carrousel. As a result, the text container works perfectly and respects the defined height. On the other hand, the carrousel has existing styling and a height attribute doesn't have any effect.


items: [{
xtype: 'carousel',
items: [{
height: 550,
html: '<img src="photo.jpg" />'
},
{
html: 'Image 2'
}]
}, {
xtype: 'container',
items: [{
flex: 1,
height: 150,
style: 'background-color: red;',
html: '<p>Texts</p>',
}]
}]

[evant]

You've modified my original example a fair bit. Anyway, if you want the height: 500 to be a carousel, then make it a carousel, don't add an extra layer underneath it.

[alexandercarter]

So I can't do a fixed-height carousel and a variable-height container underneath? :(

In any case, I don't seem to be able to specify a height for a carousel.

[evant]

Of course you can:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 200,
html: 'Left',
style: 'border: 1px solid green;'
},{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
style: 'border: 1px solid blue;',
height: 500,
xtype: 'carousel',
items: [{
html: 'Carousel 1'
},{
html: 'Carousel 2'
}]
},{
style: 'border: 1px solid red;',
flex: 1,
html: 'Bottom'
}]
}]
});
}
});


As I said above, don't nest stuff needlessly.

[alexandercarter]

Thanks.