Inovua React Data Grid - change pre-built styling, like ellipsis padding - css

I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!

Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!

Related

How to combine PrimeFaces InputGroup with an overlay SelectOneButton

I want to build a component, based on InputGroup, with a button that should open a selection. Something more o less like this (please, ignore black border):
When InputGroup p:button A (label '=') is clicked, it opens a p:selectOneButton B, so I can change A value based on B selection.
I have a basic functional script, it can be enhanced, but the simple behavior is accomplished, please fill free to make any improvements/suggestions:
function changeSelectedFilter(evtTarget, tgtButton) {
const op = evtTarget.getJQ().find(':checked').val();
const A = PrimeFaces.getWidgetById(tgtButton);
A.value = op;
A.getJQ().children().text(op);
}
My major issue is with components usage and placement. I'm working with a p:tooltip for now, but it's not what I want, do you have any clues in how to hide/show B correctly placed above A and centered, so it looks like it is been expanded?
With accessibility concerns, this could not be a good approach, and p:menuButton/p:splitButton would be much better, but I want a simple button with just an icon (not default chevron down) and no text...
Here a comparison with p:splitButton and p:menuButton, with desired max-width:
Context: this is a numeric filter component added to columns in p:dataTable, this component current implementation uses a separated p:input and p:selectOneButton, but in 2 lines, so an overlay could optimize space.
Any suggestion with others components will be welcomed too!
Thanks!

Create Profile Dropdown Menu in Polymer with Triangular top

I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.

Add another element type to definition using SassĀ§

Is it possible to add another element to a definition something like
input {
&:not[type="submit"], &,textarea {
// styles that apply to inputs that are not submit buttons, and text areas
}
// other styles here that I don't want to apply to textareas
// do want to apply to inputs
}
I've had a look through the sass documentation but can't see anything, if anyone can suggest a way to do this that would be awesome.
Thanks
No, this is not possible. Keep in mind that nesting is a feature, not a requirement. Nest when it makes sense, don't nest when it doesn't.
Your problem might be better solved with this answer, since there are more than 2 subsets of input elements (text, date, button, checkbox/radio, slider, color picker, etc.) and styles that should be applied to text style inputs generally don't work well on any other type.

Text Highlighting When Dragging From Other Elements

I am still stuck on a highlighting problem in IE 7/8. I have tried applying CSS from this question, changing the onselectstart event to return false, adding the attribute unselectable="on", and anything else I could find here on SO.
Then I came across this response to this question:
Once an element is unselectable, users cannot select from within that
element. However, they are still able to select either the text or the
box of the element by dragging into it from within another element
which is not unselectable.
I have tried to work around this by cancelling various events on
myElement (ondragenter, oncontrolselect, onmouseenter,
onselectionchange...), it didn't work.
This is exactly what I am trying to do. I have a raphael canvas object that the user can drag in order to draw. However, if they leave the canvas I do not want text in "outside" elements to be highlighted. I was wondering if anybody has found a hack for the quoted problem. I'm only having this problem in IE 7/8.
use JQUERY
$('#dragelement').onMouseDown(function(){
//YOUR CODE
});

trouble with custom 'Text Bubble' component (examples included)

I'm trying to use a custom Text component to show a series of comments. I got
the original idea from:
http://www.eonflex.com/?p=40
I've got the base case working but I am stuck with 2 problems I cant seem to
figure out:
Since I am drawing around the text, the actual height of each bubble is
greater than that of the Text field, as a result, the last bubble is always
chopped off. I have tried explicitly overriding the height getter, and adding
some padding, but I cant seem to get it right. You can see an example here:
http://test.lambandtunafish.com/bubbles/CommentTest.swf
In my layout, I have 2 VBoxes (one nested inside the other). The first vbox
shows a form where the user can enter a comment, and the second box has all the
comments. In order to ensure that the scrollbars only show up on the second box,
I set minHeight="0" on the nested VBox, but then for some reason, some comments'
text is shifted to the right. You can see an example here (look at the first
comment): http://test.lambandtunafish.com/bubbles/CommentTest-minHeight.swf
Rather than posting the code here, I've provided some links:
Container: http://test.lambandtunafish.com/bubbles/CommentTest.mxml
Bubble: http://test.lambandtunafish.com/bubbles/CommentBubble.as
If anyone has any ideas, I would appreciate it.
Thanks!
Have you considered adding padding to you VBoxes?
<mx:VBox id="vBox" verticalGap = "100"/>
There is a nice example here

Resources