I found several posts on this but none had an answer that works for my scenario. This post was the closest I could find.
Currently, the tooltips on my ASP.NET web pages have been formatted (using CSS) and display correctly when hovered over, but also appear (using jquery 1.12.1) at the foot of the page as a list of DIVs each time a tooltip displays - on some pages there are over 20 so the page gets very 'busy' if the user hovers over multiple items.
Following the suggestions in the linked post, if I add the link to the js ui file (as below) in the HEAD section of my pages, the divs stop appearing but the formatting for the tooltips is partially lost.
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
This is the CSS for the tooltip:
.ui-tooltip {
background-color: #E8EFFD;
padding: 4px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #5787D2;
box-shadow: 0 0 5px #5787D2;
font-size: 0.9em;}
body .ui-tooltip {
border-width: 2px;}
Initially I though the only difference after adding the link was the font being larger, but when hovering over a disabled control, I noted the background colour and the html formatting is being lost. For enabled controls, these have retained the background colour of the tooltip.
I added a disabled class for the tooltip, but that didn't make any difference:
.ui-tooltip:disabled {
display: none;
}
Does anyone know how I retain the existing font size, background colour and formatting using this logic?
The tooltip when it creates the divs:
The tooltip when the divs are removed:
The tooltip over an enabled control:
The tooltip over a disabled control:
Is my only option to go back to 1.10.? of jquery which doesn't add the DIV tags, but if so, will it still cause the same issues with the disabled controls?
Many thanks
Martin
Related
I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}
I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.
At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}
I am Designing & developing a website with help of a Wordpress theme. The link to the page where I am stuck is "https://8degreethemes.com/demos/?theme=eightmedi-lite". In this page in Page title bar, the title is appears in a box having light blue color and on the box right side bottom corner, a small triangle shape appears. I need to remove this triangle. I changed the bg-color of title box to the transparent but triangle did not change its color. Please help me to figure it out. I have shared a link of a screenshot with this to highlight the triangle. Also, the theme is free so you can easily download it and look all the files for the solution.
Thanks
that is the pseudeo :: after of your element
in your css file
https://8degreethemes.com/demo/8medi-lite/wp-content/themes/eightmedi-lite/style.css?ver=4.8.5
remove this block of CSS code:
h1.page-title:after, .sidebar .widget-title:after{
content: "";
border-bottom: 15px solid #70c0e8;
border-left: 15px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
It is generating because of some css. You have to check where it is coming from by developer tool in chrome or any other tool.
I have checked the demo web page and found this line css line
border-bottom: 15px solid #70c0e8;
in your style.css
Have a look
Just remove it to remove that triangle, but remember if you remove this line, it will remove that triangle from all other places where this class is referenced.
I'm having some difficulty with the jQuery date picker control. In my application, I'm using the most basic method to invoke the calendar:
$('#elmt').datepicker();
The target element is an input text box on a pop-up div. Whenever I click into the textbox, the calendar shows up as see-through: http://s17.postimage.org/4knyxgvjz/see_thru_calendar.png
I've tried some suggestions already on Stackoverflow to adjust the z-index of the ui-datepicker class:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important; }
But that hasn't made a difference either. My test environment is running Internet Explorer 7 (the calendar does render OK on the sample index.html provided by jQuery-UI).
Has anyone seen an issue like this with the jQuery UI datepicker?
You are not loading the relevant CSS for the jQuery UI datepicker, and that is causing the Calendar to be as "see-through".
To test it, edit the CSS file for the jQuery UI and change this class background:
.ui-widget-content {
background: #000;
}
If the datepicker gets a black background, the style sheet is being
loaded, but the path for the images might be wrong.
If no black background, the style sheet isn't being loaded.
Another method to confirm if the problem lies on the style sheet is to include the CSS directly from the jQuery CDN:
http://code.jquery.com/ui/1.8.20/themes/redmond/jquery-ui.css
Im trying out the datepicker of JQuery and the previews given in the site
http://jqueryui.com/demos/datepicker/#icon-trigger
has different size than the actual one i placed on my code.
I tried changing the font-size of the datepicker table
.ui-datepicker table {width: 100%; font-size: .6em; border-collapse: collapse; margin:0 0 .4em; }
since I could not find a font size setting of the Header (Month Year), the topmost part in between the previous and next arrow.
The fonts in the calendar and the daynames already became smaller
but the Month year font size remained the same. Its really dissapointing. ;(
.ui-datepicker select.ui-datepicker-month-year {font-size:.6em; width: 1%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 1%;}`
Please help.
Thanks,
tinks
I'd suggest creating a theme with the online "Theme Roller" rather than editing CSS manually. You can start from the existing theme that best matches your needs and tweak it to your liking. The benefits are:
You don't risk breaking CSS rules used for features or layout
The theme will be automatically reused by all other jQuery UI widgets
Additionally, the Theme Roller adds a link to the generated CSS (see the source code when you're done) so you can go back later and do further edits.