I want to add a panel dynamically with this structure. It should grow in a column and also if I delete panel in middle next panels should move before.
Panel1 panel3 panel5 ....
Panel2 panel4 panel6 ....
I tried the column layout but its growing in columnwise. I tried to update the layout with
vertical: true.
if (itemLength % 2 === 1 && itemLength !== 0) {
container.setLayout({
vertical : true
})
} else {
container.setLayout({
vertical : false
})
}
Nothing seems to work.
You can use hbox layout for container in which you want to add panels horizontally and vbox for vertically.
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
}
},
And provide flex to adjust height and width accordingly while adding or deleting.
flex: 1;
Here You can find the working fiddle for your scenario. When you click on add button, a panel will be added to your container horizontally having a delete button and width will be adjusted accordingly and same will be taken care on deletion.
Related
I am creating a drop-down control as a reusable web component and I decided to use PopperJS to handle the positioning of the drop-down items.
I am experimenting with sub-items, I've created a little check to determine the placement:
placement: this.parentElement.nodeName == "MY-ELEMENT" // Check if parent is a menu
? "right"
: "bottom"
I have created a StackBlitz.
The sub-items open to the right okay, but if you F12 and inspect the items they are translated -60px, so the items are positioned in the centre rather than positioned at the bottom going down.
If I choose placement right-end then the items are positioned too far down, what I want is for translate Y to be 0 not -60.
How do I determine that the items should be positioned correctly?
Is the StackBlitz working properly?
I think you could use the offset modifier to add some skidding:
createPopper(reference, popper, {
placement: this.parentElement.nodeName == "MY-ELEMENT"
? "right"
: "bottom",
modifiers: [
{
name: 'offset',
options: {
offset: ({ placement, reference, popper }) => {
if (placement === 'right') {
return [60, 0];
} else {
return [];
}
},
},
},
],
});
It could be 60 instead of -60, not sure if I got exactly what you want.
You can check the usage here: https://popper.js.org/docs/v2/modifiers/offset/
I need to fit a container inside a table cell. Currently, I am unable to do so, and the container only shows when I manually set its height.
Here it is a fiddle showing the issue.
https://fiddle.sencha.com/#fiddle/13ug
If I set the container height to (say, 300), the container is displayed. However, I would like the container to automatically fit the colspan/rowspan and resize according to the table.
Could I please get some help? Thanks!
This will auto size the container to fill 100% of the cell height - even if the cell height increases.
initComponent: function() {
var me = this;
var tester2 = Ext.create("Ext.container.Container");
Ext.apply(tester2, {
height: "100%",
layout: "fit",
style:"background-color: red",
colspan: 5,
rowspan: 2,
});
Is it possible to hide a div when the width changes? I know you can do it with bootstrap but I need to somehow do it without it. i need it to display:none when increase and it needs to display:block when it is returned to 612px
<div id="grid" style="width:612px"></div>
You cannot listen for a width change, instead of that you can add a new event listener (different from the kendo-ui event handler) for the same element and check the width. In that case you can show or hide the element depending on the current width.
You'd want to write something that checks the width and shows/hides it based on that width:
function checkGridWidth() {
var gridWidth = $('#grid').width();
if(gridWidth == 612){
$('#grid').show();
}else{
$('#grid').hide();
}
};
You'll probably want to check the width on document ready as well as when certain events happen, such as window width resizes or maybe clicks?? not sure what could affect the width:
$(document).ready(function() {
checkGridWidth();
});
$( window ).resize(function() {
checkGridWidth();
});
$('#someElement').click(function() {
checkGridWidth();
});
EDIT
Based on comments from OP, the need is for an event handler that will allow the #grid to be collapsed when another element is expanded...
See: http://demos.telerik.com/kendo-ui/splitter/api
And: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() {
function collapseOtherSplitter() {
splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
}
function onExpand(e) {
collapseOtherSplitter();
}
// One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
var splitter = $("#horiz-splitter").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "50%" },
],
});
// Your bottom, vertical splitter
$("#vertical-splitter").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100px" },
],
expand: onExpand,
});
});
I am trying to position text within a viewport so that as the user scrolls along the viewport the text in the column remains visible for as long as possible. The issue is that the view port may be smaller than the width of the column in the table. So I have something close to working here: http://jsfiddle.net/Deterus/6eU24/15/
$rowDiv.scroll(function (e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
var thresh = $('.peek').width();
$.leftofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTL").addClass("textAdjustTR");
$.rightofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTR").addClass("textAdjustTL");
$.inviewportCenter("#lookInMe", ".peek", {
threshold: 0
}, thresh);
});
This is where I am able to add or manipulate the css needed to keep the row elements at the edge of the viewport. Currently the classes just align the text to the right or left and doesnt allow the sliding nature I need. Any leads would be appreciated.
I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)