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...
Related
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
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
As the title says, I'm wondering how to get this image to span the whole browser window/page instead of having the gray margins.
Im using this theme:
https://raw.githubusercontent.com/olleota/themes/master/paperweight/main.html
And, its in action here:
http://fvcking5hit.tumblr.com/
where you see the gray borders and I just want it to span the whole page wile keeping the fade effect.
OK thank you for the additional comment, this should be all the code you need.
Find this code in your theme (it's showing at around line 226):
#masthead {
margin: 0 10%;
padding: 15% 0;
width: 80%;
}
Change it to:
#masthead {
margin: 0;
padding: 15% 0;
width:100%;
}
There are several references to #masthead in your css, so you will need to target the last reference for this to work (or tidy up the css by removing the old properties).
UPDATE
As you pointed out there is a media query changing the properties of the masthead.
Find this code:
#media (min-width: 1500px){
.theme-name-Paperweight #masthead {
margin: 0 20%;
width: 60%;
padding: 10% 0;
}
}
And change to:
#media (min-width: 1500px) {
.theme-name-Paperweight #masthead {
margin: 0;
width: 100%;
padding: 10% 0;
}
}
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 have been using the following css code:
#MainBox
{ width: 488px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px; //this being half the width
}
To ensure that the items on the page are centred. The problem is, when viewing this on an iphone (and i'm assuming similar on other smartphones) the left hand side of the page is chopped off! Does anyone know how I can resolve this issue and bring everything into fit?
Thank you!
You're moving the element to the left by 244px with that CSS, and the iphone screen being so small this is causing it to be cut off. Try this:
#MainBox{
width: 488px;
height: 181px;
margin: 236px auto 0 auto;
}
The technique above to center a div is a little obsolete.
Use margin: auto, width to a fixed value (which you already have), and make the parent position:relative.