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
Bootstrap switch with on text 'Yes'
I am facing the problem with height in Bootstrap switch. I am not able to change the height of the switch. How can I change the height of the switch.
Just add following css to your page and adjust height, padding and margin according your design.
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
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...
I have a div with class="centerMessage" . This div is inserted into the DOM at a point after the page is loaded. I would like to change the CSS on this div to center it. I tried the CSS function below, but it did not work. Does anybody know a way to do this?
function centerPopup() {
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2);
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2);
$('.centerMessage').live( function(){
$(this).css("position","absolute");
$(this).css("top",positionTop + "px");
$(this).css("left",positionLeft + "px");
});
}
If my assumption of what you're trying to achieve is correct, you don't need any Javascript to do this. It can be achieved by some simple CSS.
.centerMessage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px; /* half of the height */
margin-left: -300px; /* half of the width */
width: 600px;
height: 300px;
background: #ccc;
}
Demo: http://jsbin.com/awuja4
.live() does not accept JUST a function. If you want something to happen with live, it needs an event as well, like click. If you want something to happen always for every .centerMessage, you will need the plugin .livequery()
I believe that the following works in FF & Webkit.
div.centerMessage{
position: absolute;
width: /* width */;
height: /* height */;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
I know this is already answered, but I thought I'd provide a working jsFiddle demo using JavaScript like the OP originally wanted, but instead of using live(), I use setInterval():
First, we need to declare a couple variables for use later:
var $centerMessage,
intervalId;
The OP's issue was that they didn't know when the div was going to be created, so with that in mind we create a function to do just that and call it via setTimeout() to simulate this div creation:
function createDiv() {
$('<div class="centerMessage">Center Message Div</div>').appendTo("body");
}
$(function() { setTimeout("createDiv()", 5000); });
Finally, we need to create a function that will check, using setInterval() at a rate of 100ms, to see if the div has been created and upon creation, goes about modifying the div via jQuery:
function checkForDiv() {
$centerMessage = $('.centerMessage');
if ($centerMessage.length) {
clearInterval(intervalId);
var $window = $(window),
winHeight = $window.height(),
winWidth = $window.width(),
positionTop = (winHeight / 2) - ($centerMessage.height() / 2),
positionLeft = (winWidth / 2) - ($centerMessage.width() / 2);
$centerMessage.css({
"display" : "block",
"position" : "absolute",
"top" : positionTop.toString() + "px",
"left" : positionLeft.toString() + "px"
});
}
}
$(function() { intervalId = setInterval(checkForDiv, 100); });
Try Use this
$('.centerMessage').live('click', function(){
Try this
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
OR
$('#foo').live('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');