I want to align: center the "select all" checkbox in the header. It is the first cell in the header of jqgrid.
I tried:
#configDiv th input[type="checkbox"] {
margin: 0 auto !important;
}
and
grid.find('th input[type="checkbox"]').css("align", "center");
Those didn't work!
Any idea?
Thanks to this answer from Oleg I found this;
grid.closest('div.ui-jqgrid-view').find('table.ui-jqgrid-htable th:first-child').css("text-align", "center");
Inputs, such as checkboxes, are inline elements and you can't centre them directly. You need to centre the "text" (I know a checkbox isn't text, but that is what the CSS rule is) in the parent element, in this case the th.
You can do that with the following code in your CSS;
#configDiv th {
text-align: center;
}
If you need to target the particular th then you should add a class to the HTML and use the th.classname selector.
Hope this helps.
Related
Hi I have an HTML page where I want to include CSS only if two conditions are met.
The HTML page will always have the div with id flipbook-page3-front
The HTML page will sometimes have the div with id pagesFlipbook
These divs are not siblings and are not after each other
I want to create some CSS on flipbook-page3-front only if the div pagesFlipbook is present. Is it possible. This is my CSS without any conditions:
.flipbook-page3-front{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
This will work only if you have class pagesFlipbook of parent div so it will affect.
Write conditional CSS like this.
.pagesFlipbook .flipbook-page3-front { /* write css */ }
Yes, it is possible, please see the code below...
const element = document.querySelector('#pagesFlipbook')
if(element != null){
document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
}
You can declare in your CSS the following class to complete this...
.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
I am having trouble aligning LinkedIn share button on a website. Check the screenshot below -
You can find it live here. The button aligns well on other parts of that page but when it is placed above or below title then it somehow misbehaves.
How can I fix this?
I think this will solve your problem
span.IN-widget > span{
display:block !important;
}
Then clear <br> whick is between them and don't forget to clear element style to display.
In a custom CSS file, add the following:
.IN-widget > span > span {
height: 30px;
}
Make sure the Custom CSS file order is the last.
Output:
Thanks to all those who tried to help! I finally managed to get it aligned.
Solution:
Since the issue occurs only when the buttons are positioned above or below title text so first of all I programatically added a custom class to the LinkedIn button container - btnsx-li-height. Then I applied the below CSS -
.btnsx-li-height .IN-widget {
position: relative;
}
.btnsx-li-height .IN-widget > span > span > span {
position: absolute;
left: -30px;
bottom: -20px;
}
I got a button which is inside a div, but I need to get that div on top of this button, in order to be able to use onMouseOut event.
I tried to change z-indexes of those two, though that didn't helped. Any ideas? I can include code for better understanding but I think it's not necessary.
Impossible. Children will always appear above their parent.
You need to seek another approach; disabled elements do not appear to have events. I'd reconsider the UI to circumvent this issue. If you absolutely must have this functionality, perhaps replace the disabled button with another HTML element that can accept mouse over events.
http://jsfiddle.net/4HU72/
HTML
<button>Active Button</button>
<div>Disabled Button</div>
Disable button
<span></span>
CSS
button, div {
width: 200px;
height: 200px;
display: block;
background-color: #336699;
}
div {
display: none;
}
Javascript
$("a").click(function() {
$("button").hide();
$("div").show();
});
$("button, div").mousemove(function(e) {
$("span").html(e.pageX+"|"+e.pageY);
});
So I've got this control I'm trying to make. It's an in-place text editor for a website, and the basic idea is that it will display a label with some text, and when you click the text, the label disappears and a textbox appears in it's place, so that the user can edit the data.
The general layout is something like this (id's and events removed for clarity):
<table>
<tbody>
<tr>
<td>
Some other cell, etc.
</td>
<td>
<div>
<span>When you click me, I'll disappear and show the input instead.</span>
<input type="textbox" style="display:none"/>
</div>
</td>
<tr>
</tbody>
</table>
So the problem is, this setup is pretty fussy and resizes the cells when the span disappears and the input shows up. My overall goal is to be able to set some CSS on the div, span and/or input, in order to get this thing to stay still. I've had a minor amount of luck with position:absolute on the div, however, the text simply overflows it's bounds, and doesn't wrap properly within the cell.
As this is a control, I can move these three elements around as needed, or add other elements, but I would really like to leave the table, tbody, tr and td tags alone.
Any ideas?
Edit:
In the end, I had something like this:
.inPlaceEditor
{
margin-right:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
white-space:normal;
display:block;
width:100%;
height:100%;
}
.inPlaceEditor span
{
white-space:normal;
}
.inPlaceEditor input[type="textbox"]
{
display:none;
width:100%;
border:solid 0px black;
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
padding-top:0px;
padding-left:0px;
}
With a click event handler that looks like this:
function ShowInPlaceTextEditor(_this) {
var div = $(_this).closest('td');
div.css({ height: div.height(), width: div.width() });
$(_this).hide().next().show().focus().selectAllText();
}
And an associated handler that hides the textbox that looks like this:
function HideInPlaceTextEditor(_this) {
$(_this).closest('td').css('height', '');
$(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show();
}
Thanks to everyone who helped.
If you can rely on javascript, wrap a div around everything in that cell. When the page loads, get the current height of that div as it was rendered. Then, assign that height to the div in styles. This way, when you display the input, it should still be propped open by that div with the height assigned to it. I would suspect the input is a little taller than the span with text, so you may need to bump that height up a few pixels.
The only way I know to prevent cells from expanding is to use this...
table { table-layout: fixed; width: 500px; }
table td { overflow:hidden; }
Although, an interesting attempt would be to make the div relatively positioned, and then set the input as absolute...
td div { position: relative; }
td div input { position: absolute; }
Absolutely-positioned elements don't cause expansion, and their starting position is based on the first relatively-positioned parent.
Anything wrong with setting the width/height of the div or the td element? Don't mess with positioning.
During the function that hides the text and displays the textarea, you could sniff for the dimensions of the cell and resize the textbox to match.
<div>
<span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span>
<input id='box1' type="textbox" style="display:none"/>
</div>
<script>
function flip(text, boxID)
{
var box = document.getElementById(boxID);
var parent = text.off
box.style.width = text.offsetParent.offsetWidth + "px";
text.style.display = "none";
box.style.display = "";
}
</script>
Of course, if your text is sitting by itself on a line, it will resize to the full container width, so you might want to set a max width for the box too.
And of course, if you want to use a TextArea instead of a TextBox, you can sniff & set the Height just as easilly (with .height & .offsetHeight, respectively).
Good luck!
Some text
.sliderPart {
width: 25%;
height: 100%;
}
.sliderPart a {
display:block;
position:relative;
text-decoration:none;
height: 100%;
font: 1.3em Arial, Sans-serif;
}
How can I make my link clickable for all div-area?
The easiest thing is to remove the div altogether:
<a href="#computers" class="sliderPart">
<strong>Some text</strong>
</a>
a.sliderPart {
...
}
Try this:
$(".trigger").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
..you'd also need to give cursor: pointer to the clickable element.
Put the link outside the div. You can make an anchor tag act similarly to a div. Like you're doing in the css you posted.
For dropdown lists, I use the following method a lot...
If you're not opposed to using scripts, you can make the div itself a proxy of sorts, so that if you click anywhere on the div, the first link within that div is subsequently clicked automatically.
$(".sliderPart").bind("click", function(){
$("a:first", this).trigger("click");
});
Of course you would want to update your styles for the div when you mouse over it to indicate the entire thing is clickable.