Replies
Hello,
Thank you for posting in our community!
After looking into both images, what I can say is that the desired look can be achieved by setting some of the IgGrid Paging properties and slightly adjusting the CSS.
The usual look of the IgGrid Paging (which is observed in the first image) is achieved by simply using this code:
.Features(f =>
{
f.Paging()
.PageSize(10);
})
To achieve the design in the second image, you will need to:
- Remove the pager records label (“1 – 10 of 10 records”)
- Remove the first and last page buttons
- Move the drop-down in the pager
- Change the drop-down label from “Show” to “Ver”
- Remove the drop-down trailing label (“records”)
- Remove the “Prev” and “Next” button labels.
- (Optional) Always show one page count. (< 1 > and not < 1 2 3 >)
- Align Next, Page Count, and Last buttons to the left and the drop-down to the right.
Points 1 to 7 can be handled via the paging properties:
.Features(f =>
{
f.Paging()
.PageSize(10)
.ShowPagerRecordsLabel(false) // handles 1
.ShowFirstLastPages(false) // handles 2
.PageSizeDropDownLocation("inpager") // handles 3
.Locale( // handles 4, 5, 6
@"{
pageSizeDropDownLabel: 'Ver',
pageSizeDropDownTrailingLabel: '',
prevPageLabelText: '',
nextPageLabelText: ''
}"
)
.VisiblePageCount(1); // handles 7
})
Point 8 can be handled via CSS:
.ui-iggrid .ui-iggrid-paging {
float: none;
}
div.ui-helper-clearfix.ui-iggrid-pagesizedropdowncontainer {
float: right;
}
All supported options can be found in the IgGrid Paging API documentation here.
Please test it on your side and let me know if you need any further information on the matter.
Sincerely,
Riva Ivanova
Software Developer
Hello,
Thank you for posting in our community!
In version 21.1.0, a new feature was introduced for the IgxTooltipTarget – trigger events. Now, the tooltip target allows you to set which event triggers will show or hide the tooltip. Expects a comma-separated string of different event triggers, and the defaults are pointerenter for the showTriggers and pointerleave and click for the hideTriggers.
Before this change, the tooltip target reacted to mouseenter and mouseleave. As well as click for hiding, this remains unchanged.
This feature can be checked in our Triggers sample here.
Additionally, there were some behavioral changes in version 20.1.0 related to the show and hide delays. They were made shorter – from 500ms to 200ms for showDelay and 300ms for hideDelay. However, this change should be noticeable in version 21.0.10, too.
While testing the reported behaviors with the Triggers sample, I did not notice the tooltip appear more aggressively/without a delay, or for it to remain open.
However, if you are experiencing the showing without delay when quickly hovering on the tooltip itself, similar to the demo below, then please note that this behavior is expected. Since version 20.1.0, the tooltip remains open while interacting with it, and in the following case – quickly interacting with the tooltip while it is still showing, the show animation is canceled, and the tooltip is shown immediately. This is expected and by design.
To conclude, when the event triggers feature was introduced, it did not affect the delay behavior in any way. However, what I can suggest is checking out the showTriggers and hideTriggers options, changing them to mouseenter/mouseleave to simulate the previous behavior. Also, if needed, you can adjust the showDelay and hideDelay options too.
Please test the sample as well as the suggestions on your side and let me know if you need any further information on the matter.
Sincerely,
Riva Ivanova
Software Developer
Hello Vignesh,
Thank you for posting in our community!
I have been looking into your question and what I can say, as mentioned in our Sizing topic here, is that a horizontal scrollbar will be rendered if the combined width of all columns is bigger than the actual IgxGrid width.
From the provided code snippet I can see that the combined width of the columns equals 1700px (100 + 50 + 1300 + 250), however, the IgxGrid width is not set which means that it will default to 100% and will try to fill the available space as per our documentation here. Additionally, as mentioned in our Percentages section here, if we set the grid width input to 100% and there is no parent element it will fill 100% of the available width of the browser window.
Having this in mind, if the <div class="col-12 p-1 flex-column first_child flexContent1"> or <div class="location-grid"> do not have a width CSS property set to a value less than 1700px (the combined width of the columns) and the browser window is greater than 1700px, then it is expected that no horizontal scrollbar is rendered.
Here could be found a small sample where I have placed the IgxGrid in a parent div element which has width and height set to 500px. The IgxGrid itself does not have any width or height set and will size relative to the parent div element which means that the final width and height of the grid will be 500px.
Additionally, the combined width of the columns is 1100px which exceeds the width of the IgxGrid (500px) and results in a horizontal scrollbar being rendered.
Please test it on your side and let me know how it behaves.
To conclude, as the isolated sample seems to be working correctly and both horizontal and vertical scrollbars are rendered, it is hard to tell what the possible reason for this behavior might be.
Having this in mind, in order to assist you further, it would be helpful if you could provide me with a small sample that demonstrates the behavior on your side. Also, if possible, it would be great if you could try and modify the provided by me sample, so it reproduces the issue.
Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that are not directly related to the issue, zip your application, and attach it in this forum thread.
Thank you for your cooperation. Looking forward to your reply.
Sincerely,
Riva Ivanova
Associate Software Developer