The data I want to display in ag-grid is predominantly blocks of text. I would like the text to wrap and the cell height to auto.
wrapText: true,
autoHeight: true
However, when the text wraps, it maintains a line-height of 40px, which is not attractive. I also notice it doesn't try to wrap on word.
I tried resetting the line-height, but then I lose any top or bottom padding. When I add the padding, the top padding is fine, but the bottom padding is hidden - the row height does not account for the padding.
How do I get an attractive block text display in a cell with decent padding of the cell contents?
You could add some CSS to directly target the cell content to add padding:
.ag-theme-alpine .ag-cell-value {
line-height: 20px !important;
word-break: normal; /* prevent words from breaking */
padding-top: 5px; /* space top */
padding-bottom: 5px; /* space bottom */
}
See this implemented in the following plunkr
Related
I have a Flutter web app that contains a SingleChildScrollView and a number of elements in it. When viewed on my iPhone's Safari, the URL and bottom bars do not hide as I scroll downwards as it would on any other site.
I've tried a number of things including using different elements like ListViews and playing with the physics, but the URL and bottom bars still are not dismissed.
Any ideas how I could configure a web flutter app to help the browser recognize the scroll and dismiss them?
Check out this thread in GitHub: Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari
Credit: jamesblasco
You can add this to the of the index.hml file of any flutter project and try it also there.
<style>
body {
height: 500vh !important; /* Bigger than 100% to allow scroll */
position: static !important; /* Override absolute from flutter */
overflow-y: scroll !important; /* Allows verticall scrolling */
overflow-x: hidden !important;
touch-action: pan-y !important; /* Allows vertical scrolling */
overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
}
/* Centers flutter canvas with a size of the viewport*/
flt-glass-pane {
position: fixed !important; /* Overrides absolute from flutter */
top: 50vh !important;
left: 50vw !important;
max-width: 100vw !important;
max-height: 100vh !important;
transform: translate(-50vw, -50vh) !important;
}
/*
Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and -webkit-overflow-scrolling: touch;
Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
::-webkit-scrollbar {
display: false;
width: 0px;
height: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
</style>
I am attempting to add a text-shadow to an ion-title element, but the shadow is getting clipped. How do I avoid this, if possible? Unfortunately, there is no part accessible in the shadow DOM, and the .toolbar-title element within it is the one I need to resize. Any ideas of how to do this?
https://codepen.io/mattmc318/pen/zYBOVQP
Yes, sadly we don't have a part to access the title and you can't use .toolbar-title either to directly set the height, and many css properties won't work.
I tested in your codepen and seems that you can use line-height instead of height in your ion-title css selector to set the height of your line box:
ion-title {
font-family: 'M PLUS Rounded 1c', var(--ion-default-font);
font-weight: bold;
text-align: center;
line-height: 32px;
#include outline(4, rgba(137, 57, 233, 0.5));
}
Ag-grid has nice documentation about grid auto-height:
https://www.ag-grid.com/javascript-grid-width-and-height/
But I can't understand how to make the ag-header fixed in the case when my table height is bigger than the viewport height. I scroll down through the table but header stays in the top.
You can see the same case when you choose 50 rows auto-height in the last example of the documentation page.
How to fix header in that case?
Add the css below to have fixed header in ag grid with auto height.
CSS
.ag-theme-alpine .ag-header {
top: 0;
position: fixed;
width: auto;
display: table;
z-index: 99;
}
.ag-theme-alpine .ag-root-wrapper {
border: none!important;
}
Refer the code attached : Auto Height - Fixed Header
I have a simple problem, but I may be asking for the impossible.
I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:
http://jsfiddle.net/ExUs9/3/
form {
background:#62CAD9;
padding:10px;
}
div {
background: white;
height: 30px;
margin: 10px;
width:300px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
input {
background: none;
width: 100%;
height: 100%;
border: none;
transform:skewX(-30deg);
-ms-transform:skewX(-30deg);
-webkit-transform:skewX(-30deg);
}
My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:
http://jsfiddle.net/kdqKX/
form {
background:#62CAD9;
}
input {
margin: 20px;
background: white;
width:300px;
border: none;
height: 30px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
The problem here is that the text is skewed.
I know I could just remove the focus outline, but is there any way to either:
Skew the input box--but not the contained text--without skewing via a parent div
Apply the border to the parent div when the child input box is focused
I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.
Thank you, you brave internet geniuses,
Dalton
The easy solution would be a background image.
CSS gradient can fake this.
background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );
Try it without transform. http://jsfiddle.net/khGDj/
other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.
I created a group chat for the iPhone and its almost perfect. It uses the complete viewport by position various elements with:
#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}
which makes it look like this:
But when the keyboard pops everything shifts and a grey area appears below:
The height of that grey area is the height of the statusbar and the height of the Debug Console together (without the Debug Console is just the height of the statusbar).
Why does it insert this grey area and how can I avoid it?
#message-input:focus {
margin-bottom: -XXXpx;
}
Where XXX = height of problem grey area. Could be a quick fix for it...