I'm using Ant design Collapse , I want ellipsis for collapse header when text overflow
I used like this but it didn't work can some one help me in this?
.ant-collapse-header{
width:50px
text-overflow: ellipsis;
}
Thanks,
Use below CSS, it must work. However you don't need width attribute if you want that to be scaled for full width but without new line.
.ant-collapse-header {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
Have CKEditor 5 working in ReactJS. However, need the ability to make the entire editor resizable so content can be expanded for larger screen sizes. I have made attempts with CSS resize without success.
For example:
.ck-editor__editable {
min-height: 20vw;
height: 100%;
resize: both;
overflow: scroll;
}
Also, I have tried adding resize and overflow on the parent DIV to the editor.
Is CSS the best approach here?
If anyone has done this successfully advice is appreciated.
I have 20 columns in the grid. I want the grid to be split in half, where in the left half I can scroll through the first 10 columns, and in the right half I can scroll through the last 10 columns. In other words, I want there to be two horizontal scrolls in the same Grid. Is it possible?
The functionality you're trying to implement doesn't natively exist in ag-Grid. One solution would be to use pinned columns where you pin 10 columns to the left. The problem would be that you cannot scroll pinned columns, therefore you'll have the add some extra css in order to modify the grid to your needs.
NB. this is VERY hacky solution:
Add the following to your css in order for the pinned columns to be scrollable (change the width from 200px do your desired width):
.ag-pinned-left-cols-container {
min-width: 200px !important;
width: 200px !important;
overflow: auto !important;
}
.ag-horizontal-left-spacer {
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
}
.ag-pinned-left-header{
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
overflow: hidden !important;
}
You'll also need to make sure the pinned column headers scroll along with the pinned columns. For this, you can use an event listener:
document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});
runOnScroll = function(evt) {
document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)
Demo.
For those interested in ViqMontana's solution:
In version 28.1.1 they added a new event-listener which resets any scroll inside the header (commit 12552505). It says this would fix bug "AG-7137", which I can't find out what it was.
It's possible to remove this listener after the grid is ready:
const api = this.gridOptions.api;
api?.ctrlsService.leftHeaderRowContainerCtrl.destroyFunctions[6]?.();
api?.ctrlsService.rightHeaderRowContainerCtrl.destroyFunctions[6]?.();
After this the header scrolls correctly.
When using TypeScript, you will need to cast api to any.
I have a series of text fields in an Android app. I want to align the text vertically to the center (and horizontally to the left), but I can't find the correct approach.
This is my code:
textField.setUIID("TextFieldSome");
textField.getAllStyles().setAlignment(Component.BOTTOM);
This is the css:
TextFieldSome {
background-color: rgba(255,0, 255, 0.2);
color: blue;
font-size: 9pt;
margin-left: 5pt;
margin-right: 15pt;
margin-bottom: 5pt;
text-align: left;
padding-left: 20pt;
}
This is the result:
I have tried WITHOUT css and using these code variations:
textField.getAllStyles().setAlignment(TextField.BOTTOM);
textField.setAlignment(Component.BOTTOM);
textField.setAlignment(Component.TOP);
textField.setAlignment(TextField.BOTTOM);
But the text always aligns vertically to the center and never to the top or bottom.
What am I missing?
The setAlignment method is defined as:
Sets the Alignment of the Label to one of: CENTER, LEFT, RIGHT
We don't support vertical alignment of text in the API. Even center horizontal alignment isn't supported well in text components because of the complexity related to that. The core problem is switching back and forth to native which would make the text "jump".
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
In Lightbox2 I'm trying to get the caption text centred and wider than the image. I'm using the CSS file section at:
.lb-data .lb-details {
width: 100%;
float: left;
text-align: center;
line-height: 1.2em;
}
By increasing "width" I can get wider text to the right and by changing the "float" to right I can get the wider text to hang to the left.
I've also tried setting "float" to "none" and "inherit" with no success.
What I want to do is have a portrait image with centred text wider than the image.
As the text can be made to be wider than the image I don't think it's a container issue but I could be wrong.
Any suggestions? All help appreciated.
It is a container issue. The div.lb-dataContainer get's a width applied to it that matches the image container above it. To make it wider, you can override it by either by editing the lightbox.js source or by using CSS, ex. .lb-dataContainer { width: 100% !important; }