I want to implement angular material stepper as per attached screenshot where the horizontal line has some different css on edit state and when its completed then its different.
and on edit state, there is bottom line which I need to show.
we can get the event form selectionChange method of stepper:
selectionChange(event) {
if (event.selectedIndex > 0) {
const stepper = document.getElementsByClassName('mat-stepper-horizontal-line');
stepper[event.selectedIndex - 1].classList.add('editState');
for (let i = 0; i < event.previouslySelectedIndex; i++) {
stepper[i].classList.add('completedState');
stepper[i].classList.remove('editState');
}
}
}
Related
Thank you very much for your help in advance.
Let me explain the problem,
I have grid layout where I am adding the labels in the first row (its called header row). In the next 5 rows, I am adding text field, combo and date fields.
The problem I am facing is, I would like to remove the space between header(first) row and second row and continue to have default space from second row to the last rows. I have highlighted the space as red line in the snapshot
Please find the snapshot in attachment.
Any hints, please advise.
As I've mentioned in the comments, position of a component in a GridLayout defined by a top value in css. So you would need to change it if you want to re-position(remove space, in this case) an element. The problem here is that
GridLayout not necessary starts from top, so you would need to figure out a correct value for a top,
and then you would need to differentiate a correct component(label in this case) using :n-th child, since a class name applied to a component, is not propagated to a parent's v-gridlayout-slot.
As for an alternative, you could add a common styleName to all components (except labels) and using this style set margins(left, right, bottom)to all the components. (In the example below used a pink color to verify styles are applied.)
In this scenario, output is like this:
The css part:
.addPadding{
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
background-color: pink;
}
Code used:
setContent(addGridLayout())
////
private GridLayout addGridLayout(){
// Create a 4 by 4 grid layout.
GridLayout grid = new GridLayout(4, 4);
//grid.setSpacing(true);
grid.addStyleName("example-gridlayout");
// Fill out the first row using the cursor.
for (int i = 0; i < 4; i++) {
Label l=new Label("Col " +
(grid.getCursorX() + 1));
grid.addComponent(l);
grid.setComponentAlignment(l,Alignment.BOTTOM_CENTER);
}
// Fill out the first column using coordinates.
for (int i = 1; i < 4; i++) {
TextField x=new TextField();
x.addStyleName("addPadding");
grid.addComponent(x, 0, i);
}
// Fill out the secondcolumn using coordinates.
for (int i = 1; i < 4; i++) {
TextField x=new TextField();
x.addStyleName("addPadding");
grid.addComponent(x, 1, i);
}
// Fill out the third column using coordinates.
for (int i = 1; i < 4; i++) {
DateField x=new DateField();
x.addStyleName("addPadding");
grid.addComponent(x, 2, i);
}
// Fill out the third column using coordinates.
for (int i = 1; i < 4; i++) {
ComboBox x=new ComboBox<String>();
x.addStyleName("addPadding");
grid.addComponent(x, 3, i);
}
return grid;
}
if the columns have fixed width you could create 2 GridLayouts one for the header and one for the content. Both of them should have no margin and the layout that contains them should have no spacing.
i recently updated a rounded corner segment control to have different width for each segment.
the issue i have is that the last segment doesn't align properly with the end of the segmented control
i just used this code for this sample (seg being my segmented control) :
seg.layer.borderWidth = 1
seg.layer.cornerRadius = seg.bounds.height / 2
seg.layer.masksToBounds = true
seg.apportionsSegmentWidthsByContent = true
if i remove the masksToBounds line i can see that the right segment doesn't reach the edge of the segmented control.
is there any way to fix this issue?
It appears that this is caused by a rendering bug in UISegmentedControl when apportionsSegmentWidthsByContent = true. I couldn't find a simple workaround by manipulating the CALayers of the control. You can create a custom control using UIStackView to mimic the UISegmentedControl.
You should also file a radar with Apple.
I don't know if this still affects iOS, but a workaround in Xamarin.iOS is: Override UISegmentView, calculate text width of the last segment element and update it's width.
Sample code in C#:
public class MySegmentedControl : UISegmentedControl
{
public override void MovedToSuperview ()
{
// Fix truncation of last element
// when ApportionsSegmentWidthsByContent = true
if (ApportionsSegmentWidthsByContent) {
RecalculateLastSegmentWidth ();
}
}
private void RecalculateLastSegmentWidth()
{
var font = UIFont.FromName("Helvetica", 12);
var lastSegment = NumberOfSegments - 1;
var segmentTitle = TitleAt(lastSegment);
var segmentWidth = segmentTitle.StringSize(font).Width + 20;
SetWidth(segmentWidth, lastSegment);
}
}
I have a sortable vertical single column list. What I need:
1) Open original placeholder where the element was on start when user drags an element outside of the list. I need it to prevent drop outside of list. Is it possible?
2) Is it possible to add or change tolerance option? I need to setup reordering (for vertical list) when top border of dragging element overlaps bottom border of list elements. I managed get this while dragginf upward but when you dragginf down sorting work on mouse overlap.
$('#sortable').sortable({
sort: function (event, ui) {
var list = $(this),
w = ui.helper.outerWidth(),
h = ui.helper.outerHeight();
list.children().each(function () {
if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) {
return true;
}
var currElementHeight = $(this).outerHeight(),
overlap = $(this).position().top + currElementHeight - ui.position.top,
placeBefore = ui.position.top > $(this).position().top;
if (overlap > 0 && overlap < currElementHeight) {
if (placeBefore)
$('.ui-sortable-placeholder', list).insertBefore($(this));
else
$('.ui-sortable-placeholder', list).insertAfter($(this));
return false;
}
if ($(this).position().left + $(this).outerWidth() < ui.position.left) {
console.log('out');
//ui.item.parent().sortable('cancel');
}
});
},
});
Here is my experiments on jsfiddle
What I have currently is a very simple div that has a flexcroll scroll bar. This simple div contains some draggable itmes inside of it. My goal is to be able to drag one of the items and and move it about without the flexcroll scroll bar moving.
As it stands right now if I were to drag one of the items below the viewable area the simple div will scroll down. I would like to prevent this.
I'm using jQuery UI for the draggable items. I've already tried using the option "scroll:false" but this does not work for flexcroll.
I'm sorry I don't have any example code, I'm currently away from my work computer.
flexcroll: http://www.hesido.com/web.php?page=customscrollbar
I don't know if you have already resolved this problem. This morning, I have the same problem and I found your post. After that, I have googled a lot to find a solution without any lucky. So finally, I decided to do someting myself, I hope my idea will help you.
After read the Programming Guid, I found that in this version (2.0) of flexcroll, we could register a function for onfleXcroll whose description could be found by searching the keyword "Pseudo-event: onfleXcroll". This is to say that the method will be executed after a scroll is done. So here, what I restore the "top" style with the value before you drag an element.
Here are the code
var $assetswrapper; // This variable indicates the contentwrapper of you div.
var $assetsscrollbar; // This variable indicates the vscroller of you div.
window.onfleXcrollRun = function () { // This method will be executed as soon as the div has been rendered with the help of flexcroll
// You could find these two divs by using firebug, because the top value of these two divs will be changed when we scroll the div which use the class .flexcroll.
$assetswrapper = $('#contentwrapper');
$assetsscrollbar = $('#vscrollerbar');
}
var wrapperTopPosition = 0; // This is used to stock the top value of the wrapperContent before dragging.
var scrollbarTopPosition = 0; // This is used to stock the top value of the scrollbar before dragging.
var dragged; // This is a boolean variable which is used for indicating whether the draggable element has been dragged.
var dropped = false; // This is a boolean variable which used to say whether the draggable element has been dropped.
$('.draggable').draggable({ // you could change .draggable with any element.
start: function (event, ui) {
// Your code here.
wrapperTopPosition = $assetswrapper.position().top;
scrollbarTopPosition = $assetsscrollbar.position().top
dragged = true;
},
stop: function (event, ui) {
// Your code here.
dragged = false;
dropped = true;
}
});
$('your drag div')[0].onfleXcroll = function () { // This method will be called each time when a scroll has been done.
if (dragged) {
$assetswrapper.css('top', wrapperTopPosition);
$assetsscrollbar.css('top', scrollbarTopPosition);
} else {
// Code here is used for keeping the top position as before even though you have dragged an element out of this div for a long time.
// You could test the scrollbar without this piece of code, if you drag an element out of the div for a long time, the scrollbar will keep its position,
// but after you dropped this element and try to scroll the div, then the scrollbar will reach the end of the div. To solve this problem,
// I have introduced the method setScrollPos with the old top position plus 72. 72 here is to set the scroll increment for this scroll, I know
// this value is not fit for any size of windows, but I don't know how to get the scroll-increment automatically.
if (dropped) {
dropped = false;
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
}
}
};
I hope this could give you a help if you haven't found any solution yet.
I am implementing drag and drop, user can drag few images and drop them in a div, and I dynamically append a p tag as label to each image once user click on a button.
Currently I meet problem when I have 2 images which is very close to each other (one is on top of another). The appended p tag for the top images will be hidden by the bottom image. I tried to alert the z-index for each dropped image, and found out it is 'auto'. I guess I need to assign a new z-index for each div, but I tried in the function which i append the label, and it dint work as expect:
function generateLabel() {
var current = 5000;
$('#rightframe img').each(function () {
var cImgName = $(this).attr('id');
var width = $(this).width();
// To select the respective div
var temp = "div#" + cImgName;
$.ajax({
url: '/kitchen/generatelabel',
type: 'GET',
data: { containerImgName: cImgName },
async: false,
success: function (result) {
$(temp).append(result);
// I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index
$(temp).css('z-index', current);
current -= 100;
// To select the label for the image
temp += " p";
// Set label width based on image width
$(temp).width(width);
}
});
});
However, what I get is, bottom image which dropped later do NOT hide the label of the image above, but if the above image is dropped after than the bottom image, above image's label is hide by the bottom image.
It's a very specific situation and I hope I do make myself clear...
Hope can get some help here... Appreciate any feedback...
I am so glad that I able to work out a solution for this kinda weird problem. I get to one useful plugin, the jquery-overlaps which check 2 dom whether they are overlapped with each other or not. Then i assign a z-index to the label accordingly.
Just to show my solution here, in case anyone jump into this bottleneck :)
// To assign an increasing z-index to the label
var count = 100;
$('#rightdiv p').each(function () {
// If any label overlaps with the image (used overlaps plugin)
if ($(this).overlaps($('#rightdiv img'))) {
// Increase count (the z-index)
count += 10;
// Set the parent div z-index 1st, if not the label z-index do not have effect
$(this).parent().css('z-index', count);
$(this).css('z-index', count);
}
});
Thanks! :D