I have two extjs items which are of variable height to be layed out vertically.
I am using Ext.container.Container for the vertical layout, using the following code.
Ext.create('Ext.container.Container', {
//height:50,
renderTo: this.renderTo,
layout: {
type: 'vbox'
},
items: [item1,item2],
//autoHeight:true
});
The problem is the items are not visible on the page unless the height of the container is specified. But, the height of the embedded widgets is not static.
Is there any way to fix this issue? Any other components I can make use of which can stretch automatically to the height of the items.
Instead of height, apply a flex of 1 to your child elements. If you wish the ratio to be different you can play with the flex number. For instance, if you apply flex: 2 and flex: 1 you will get 2 thirds fill on the first element, and 1 third fill on the second.
For reference: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.VBox-cfg-flex
Related
I have a following image:
I am trying to add border shadow to the rectangle shape. Is that possible in cytoscape? Also, the parent elements are Customers and order. Can I decrease the size of customers and order parent element?
Here's is the link to the code and the working example:
https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fdemo_test.json
Decreasing the parent size:
This is a styling issue, cytoscape.js applies padding to parent elements, if you want your parent element to be as small as possible, you'll have to adjust the padding in the :parent style:
{
selector: ":parent",
css: {
...
"padding": "0px" \\ remove padding completely, parent almost touching inner nodes
}
},
Border shadow
This was a little tricky, cytoscape.js only provides a normal border (like "border": "1px solid black"). You can use these styles:
border-width : The size of the node’s border.
border-style : The style of the node’s border; may be solid, dotted, dashed, or double.
border-color : The colour of the node’s border.
border-opacity : The opacity of the node’s border.
None of this provides us with the ability to apply a one sided border. As an alternative, I used the ghost styles:
ghost : Whether to use the ghost effect; may be yes or no.
ghost-offset-x : The horizontal offset used to position the ghost effect.
ghost-offset-y : The vertical offset used to position the ghost effect.
ghost-opacity : The opacity of the ghost effect.
If you adjust it a little bit, you can use the x offset and a nice opacity value to achieve this box shadow:
ghost: "yes",
"ghost-opacity": 0.5,
"ghost-offset-x": 1
Here is a working stackblitz with both changes applied.
I'm having an issue with owlcarousel. When I use large images with items:1 everything works well and each slide contains 1 image. But when I use smaller images the items:1 option is ignored and the images display 4 per slide.
owlcarousel is version 2.3.4 as are the corresponding CSS files.
$(document).ready(function(){
$(".news-post-gallery").owlCarousel({
navigation : false, // Show next and prev buttons
autoplay:false,
items: 1,
loop:false,
margin: 10,
center: true,
nav: true,
navText: [
"<div>Left</div>",
"<div>Right</div>"
],
responsive:{
0:{
items:1,
}
}
});
});
My first guess is that this is a CSS issue. Mind you even the small images are not that "small", the large images that I used were like half my screen width.
Edit: navText is being ignored as well when small images are used.
The issue was another carousel being initialized targeting the owl-carousel class. This ended up initializing the one I needed with the wrong settings. The carousels initializations were coming from different templates so the result was only visible in the source once the page was loaded.
Adding $(...).owlCarousel('destroy'); before i initialized mine solved the problem.
I made an observation with Cytoscape Layout and I am wondering how to change it. The layout manager CoSe produces different results depending on the length of the label name. I encountered this when I changed the node label from a long to a short id and also to no id. The best result is produced with no id.
How to deactivate this label layout effect ?
There is a planned feature to specify how the bounding box is calculated for nodes in a layout: https://github.com/cytoscape/cytoscape.js/issues/1626
Before that's implemented, you'll have to hide labels while the layout is running.
E.g.
cy.nodes().addClass('no-labels');
cy.one('layoutstop', () => cy.nodes().removeClass('no-labels'));
cy.makeLayout({ ... }).run();
Where node.no-labels { label: '' } is defined in your stylesheet.
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
I need to know how to set the ChildrenRect height and width for a grid element??
Grid {
id: grid1
anchors.fill: parent
rows: 10
columns: 10
childrenRect.height: background.height/10
childrenRect.width: background.width/10
}
it says its a read-only element that cannot be changed when i try to do this.
You can't set them. The childrenRect properties are calculated from the item's children. The only way to affect them is by setting the children's dimensions. There's no way to set them yourself.