I'm using CSS Paged Media to create a PDF. Most of my content is aligned normally, but I have a few paragraphs I want to give a negative indent: they should start 2.5 mm to the left of everything else.
This is my CSS so far:
h2 {
font-family: Arial;
background-color: #FF0000;
font-size: 12pt;
font-weight: bold;
color: white;
padding-left: 2.5mm;
text-indent: -2.5mm;
}
This is the intended effect:
When I try the above in Antennahouse (6.5), the left edge of the red background block remains lined up with the left edge of the text "This service manual..."
So text-indent: -2.5mm; doesn't seem to be working as I expect. How can I get the effect I want?
You were close. Drop the padding-left and use:
margin-left: -2.5mm;
text-indent: 2.5mm;
Or drop the text-indent and use:
margin-left: -2.5mm;
padding-left: 2.5mm;
The effect is the same in this case. It's the negative margin-left that moves the left edge of the block area for the h2 to the left.
The result shown in AH Formatter GUI (with area borders shown):
Related
I have used following code for increasing the left border of particular column using id selector:
div#PriceCurveCurrent {
border-left: 1px solid black;
}
The quick solution.
.x-gridcolumn > .x-header-el {
border-right-width: 12px;
}
Another solution might be to use the ExtJS theme variables.
Here is a starting point.
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;
}
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've been facing a strange problem in Microsoft Edge, I'm using Pseudo Selector :after to add an arrow to all the links in a paragraph but Microsoft Edge automatically changes the color to BLUE and above that you cannot even access the Pseudo Selector in Edge.
At first I thought, it was some theme styles, I set up a small html page with 1 link and Pseudo Selector but it changes color to blue here as well but works fine everywhere even in Internet Explorer!
Any help would be great.
No one seems to be facing this problem, I've searched some of the blogs.
<html>
<head></head>
<body>
<style>
a{
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
a:before{
content: "\25B6" !important;
padding-right: 10px;
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
</style>
Some Link
</body>
</html>
Your question is already answered in an other post:
Unicode displaying strange in Edge
Setting the font-family to:
font-family: "Segoe UI Symbol";
seems to do the trick.
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".