I have already aligned the popup to the bottom using cellEditorPopupPosition='under'. But I need to adjust it a little to the left of the current position.FYI I am using a custom editor component.
I have tried adding styles to 'ag-popup-editor' class, it works but will affect other editor popups in the same table.
Related
I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1
To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select).
More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it.
Please take a look at the following screenshots demonstrating the problem:
Single select
Multiple select
Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.
Thank you.
When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').
The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed.
.
var parentElement = $(".jarviswidget");
if ($('.select2').length) {
$('.select2').select2({
"dropdownParent": parentElement,
"allowClear": !0,
"width": "100%"
});
}
I have a little bit of a problem here. I am making a kind of chat application in Flash CS5, using Action Script 3, and I am trying to make URLs that appear in the main chat textbox (where all of the things that other people have said come up), which is a TextArea component, be converted into HTML link tags. I have this working, but the problem I am facing now is that the links appear black. I want them to appear with an underline, and blue text. I am formatting the TextArea with TextFormat, and I am using some of the functionality that is only available in TextAreas, so I cannot use plain dynamic labels.
I have also tried using the style attribute of the link tag, but that didn't do anything.
How can I change the formatting for the link tags to appear blue and with an underline?
My current code for changing the links to HTML link tags looks like this:
txtOutput.htmlText += replace(/(?:http|https):\/\/\S*/g, function ():String
{
return '' + arguments[0] + ''
});
have a look at style sheets you can implement hyperlink styles form there.
update:
The textArea has a textField property. try applying he style sheet to that.
Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000
I'm currently editing a .html file with telerik radtooltips hooked up to a mapped image. Basically there are small blocks on the image that have been set to fire the radtooltips on mouse over. The html file is ran inside of a .aspx file and it inherits the telerik namespace. However, I cannot set attributes in the radtooltips and it instead defaults to a really ugly default style that I can no longer change. I've also tried setting up divs and tables inside the tool tip however, the tooltip container isn't affected so you get a nasty yellow border from the tooltip around whatever definitions are setup for the table or div.
Example:
The orange background is defined by a div inside the tooltip:
<div style="background-color:Orange; border-color:#b24710;">
This is the current tooltip I have defined...and the attributes that are being ignored:
<telerik:RadToolTip ID="rttGeochemTip" runat="server" TargetControlID="geochem" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
I have also tried this without the nested div:
<telerik:RadToolTip ID="rttCharTechTip" runat="server" TargetControlID="char" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
the code above without the nested div is the same as the screenshot except for the orange is replaced by that default yellow border color because I'm not overriding the inside color. I have also tried using CSS to the same failed effects.
Any ideas of what might cause this behavior?
The html page was nested inside a .aspx page and some how the inheritance of the telerik skin sunset was being applied and I wasn't able to override it. To fix the problem I ended up adding in a telerik skinmanager and applied a more appropriate skin for my controls and that fixed the issue. I'm assuming our styling setup wasn't built to the telerik skin standards.
I am developing a Google Chrome extension.
Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].
The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.
For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.
What is the best way to get rid of parent styles inside a div?
you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:
div.YourDiv, div.YourDiv * {
margin:0;
padding:0;
border:0;
...
}
which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.
I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.