I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}
Related
I'm stuck in a css position, how can I make all alignment button of each column in same row? I'm using wordpress plugin and tried used css to select class name, but class name are specify for all button, please somebody help me out..
Try this
CSS
.vc_gitem_row .vc_gitem-col {
padding: 10px;
min-height: 300px;
}
.vc_btn3-container.vc_btn3-left {
bottom: 0;
position: absolute;
text-align: left;
}
Note: You should scope this changes so they don't affect other sections of the site
Without seeing the code this is a bit difficult to answer, but I would take a look at setting min-height for the description above the buttons. Then it would at least push all the buttons to be aligned in a row. You would have to go even further setting some media queries to improve this styling when it comes to mobile.
Either you need to set height of Text container
max-height: 100px; //as your requirement
or set button wrapper style property
bottom:0px;
Set a min-height value for product text content just above the button in product card.
I want to make the ngx bootstrap datepicker inline instead of it appearing only when you click an input.
ngx datepicker link
Can someone help me achieve this? I've tried to add it in but there is absolute positioning and if I override it with relative positioning it doesn't work properly.
I just want to see this on the page inline without the need of having it inside an input field box:
Thanks
There is a container input in the documentation which says:
container: A selector specifying the element the datepicker should be appended
to. Currently only supports "body".
Any way to get around this?
try this, set the height to 0 with overflow: hidden an leaving it on the page. It'll be there so the picker with position itself correctly but with no height the input will be invisible and still have the picker show up where its supposed to.
And you can set the isOpen property to true so its opened by default
<input bsDatepicker [isOpen]="true" style="height: 0; overflow: hidden; border: none; padding: 0;" />
in you global css style.css file give
bs-datepicker-container {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
!important is required to coz it is having element level style so you need to override it.
Obvious: make toggle disable and show permanently.
I have a background image associated with a table column, in the centre of that table column i have a dynamic link, example below .
http://www.qrrw.net/v
As you can see the writing is a php link, Is there anyway to make the whole area of the background image clickable rather than just the text?
Any ideas or suggestions would be appreciated.
Thanks
Just add a display: block; on your <a>s.
By the way, those <div> with a center attribute (brrrrh) invalid your code. Consider remove them and, to not loose your layout, add this rule on your <a>s.
.manu1 a {
display: block;
text-align: center;
line-height: 109px;
}
In addition to the display:block; it might be helpful to put a little padding:10px; on that <a> as well. Adjust the pixel amount as needed to cover the majority of the background image
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone