I am trying to combine a tooltip with a horizontal FAB, from the Materialize library. However, the outcome is being corrupted by another library, or some of my site's custom css (I am using angular2 so there are a few different css files). You can see the specific issue below, but I wondered how I can approach finding which css rules in which file are corrupting the default materialize behaviour. At the end of the question you can see my approach to date.
In the following code, the end action icon of the FAB should display a hovering tooltip below it:
<div class="fixed-action-btn horizontal" style="bottom: calc(100% - 80px); right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
However, the tooltip message seems to replace the contents of the action icon?
I am assuming that there is a clash between materialize and some other js/css on my site. By forcing overflow: display, I can get this result:
So now the issue us a colouring and positioning one? Any ideas what properties are likely to be corrupting this, or how I could find them. I targetted the element in Chrome Dev tools, but there wasn't any obvious cause and I couldn't inspect the actual tooltip, only the underlying button.
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
I am using Bootstrap v4.3.1 with no modifications and I implemented a dropdown menu with the following markdown:
<li class="nav-item dropdown">
A
<div class="dropdown-menu">
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/B">B</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/C">C</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/D">D</a>
</div>
</li>
I did no changes to the Bootstrap code whatsoever.
The displayed hoveron on all dropdown items appear to be rendered partly out of bounds to the right.
The problem is that the dropdown-item class gets this rule width: 100%; which if I disable in Firefox/Chrome it seems to solve the issue.
I tried going the not recommended way and going to the bootstrap.css and commenting out the width: 100%; rule. It did not work.
The problem is that the browser somehow imports the rule not from bootstrap.css but rather _dropdown.scss even though such a file does not exist...
How do I fix my dropdown items hoveron?
I am using .NET 6 if that matters.
I also tried setting the CSS with inline CSS added to the DOM using jQuery but it also seems to have no effect ($(".classnamehere").css("width","");)...
Is this a bug from Bootstrap's side???
How does Bootstrap generate .scss files which I can see in the browser without actually having those files?? I don't import anything from the internet for Bootstrap, everything is local.
Here's a picture to visualize it:
Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: The tabbed metaphor is well understood and in some use cases includes the ability to close a tab via an X icon - think of multi-document editors such as VS Code, etc. Fomantic-UI has a good tab component but no automatic means of including a close icon, and good button and icon components with many options. It also offers the ability to combine components - with much power great responsibility comes - and I find that sometimes a little pointer would be useful. Therefore I provide this snippet to suggest some potential solutions.
Something like this is the target...
See my answer below.
The snippet below illustrates my answer. For me the tertiary button & icon combination are the best option. Although the height of the tab is affected by inclusion of the buttons and will need to be worked on.
As a bonus the JS in the snippet shows how to close a tab on click of the close icon.
Note: This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (#17-Jan-2020).
$('.menu .item')
.tab();
$('.tabCloser').on('click', function() {
// get the parent of the icon, meaning the anchor.
var parent = $(this).parent();
// get the tab name from the anchor.
var tabName = parent.data('tab');
// erase elements with the matching tab name
$('[data-tab=' + tabName + ']').remove();
// Click the first remaining tab if any.
if ($('a.item').length > 0){
$('a.item').first().trigger('click');
}
})
.daContent {
margin: 2em;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<div class='daContent'>
<p>
The tabs below illustrate 3 options:
<ul>
<li>First uses a button of class <i>ui basic icon button</i></li>
<li>Second is a simple icon with class <i>close icon</i></li>
<li>Third uses a button with class <i>ui tertiary icon button</i></li>
</ul>
None require additional JavaScript or CSS.
</p>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First
<button class="ui basic icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
<a class="item" data-tab="second">Second <i class="close icon tabCloser"></i></a>
<a class="item" data-tab="third">Third
<button class="ui tertiary icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
Ideally there should be no border around the button, and for mouse users a mouse-over UI change without reverting to additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Better - no border, but also no mouse-over UI effect. And the icon cramps the tab text too much. We could fix both with custom CSS / JS but the aim is for no additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Best - no border, plus a mouser effect.
</div>
</div>
</body>
Situation:
I have a PHP written page, wich will include a css via
<style type="text/css">#import url(/css/my.css);</style>
Afterwards (and on demand) a javascript file is loaded, that opens a new "Window" where the css declarations would be used.
This works in all Browsers except Internet Explorer (7-9).
Problem:
According to the IE Developer Tools (F12) the css file is loaded and I can see all declarations made within this file (they are correct), but when the new window is displayed, the css declarations do not seem to be in effect.
"Solution":
Deselecting (and reselecting them, even if it's not necessary) some of the rules of the given CSS File in the CSS-Tab of the IE Developer Tools make the page "render" correctly.
Question:
Where does this behaviour come from, and how do i get rid of this?
Additional Information:
I do not have more than 4095 (not even counting all in all CSS Files alltogether) selectors (in fact I have less than 2.5k) and I only load less than 31 (exactly 7) different CSS Files.
As requested:
<div class="navigate">
<div class="nav-slider">
<div class="nav-slider-left">
<span role="button" class="nav-link nav-page-back"><</span>
<div class="page-number">
<span>1 of 1</span>
</div><span role="button" class="nav-link nav-page-next">></span><span role=
"button" class="nav-link nav-now">â—</span><span role="button" class=
"nav-link nav-prev-week"><<</span><span role="button" class=
"nav-link nav-prev-day"><</span>
</div>
<div class="nav-slider-content">
<div class="nav-slider-bar">
<a class="nav-slider-button"></a>
</div>
</div>
<div class="nav-slider-right">
<span role="button" class="nav-link nav-next-day">></span><span role="button"
class="nav-link nav-next-week">>></span><span role="button" class=
"nav-link nav-zoomIn">+</span><span role="button" class=
"nav-link nav-zoomOut">-</span>
</div>
</div>
(i have reduced the HTML Code to the relevant part [ExtJS is creating a massive amount of structure around the given code)
CSS Declarations are here
I'm not sure but it might be a caching problem since your styles are interpreted as inline-css and won't be saved when you open a new window. Did you try to use:
<link href="yourcssfile.css" type"text/css" rel="stylesheet"/>
UPDATE:
It seems to be a bug. I found your problem in this article (point5). Solution is in there aswell.
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
I have Firebug and IE Web Developers' toolbars installed on my machine, and they are very helpful for investigating CSS classes, DIVs, etc. My problem is that I'm working in Wordpress (custom Genesis theme) and I need to know the exact syntax of CSS class when it is nested rather deep. Yes, I can look at the code and see the code, but I'm not able to derive the CSS class sucessfully.
For example:
<div
id="inner">
<div
id="content-sidebar-wrap">
<div
id="sidebar-alt"
class="sidebar
widget-area">
<div
id="menu-pages-7"
class="widget
menupages"> <div
class="widget-wrap">
<ul
class="nav">
<li class="page_item
page-item-12 current_page_ancestor
current_page_parent">
<a
href="http://mywebsite.org/wordpress/about-us/"
title="About Us">About
Us</a> <ul
class="children">
<li class="page_item
page-item-117
current_page_item">
<a
href="http://mywebsite.org/wordpress/about-us/contact-us/"
title="Contact
Us">Contact Us</a>
</li>
I want the parent to have different formatting than the child item, but
#sidebar-alt .nav li {
border-bottom: 0px dashed #003893;
}
doesn't make anything happen th way I want it to.
Yes, I realize that I need to learn my CSS better, but there are so many nestings, I would simply love to have a browser tool that would allow me to click on a portion of the page and it would tell me the class that bit of text is and how the class should read in the CSS. When I use Inspect in Firebug, I get a number of different existing classes that apply, but not necessarily that exact class that I could add to the style sheet to customize.
Any help would be greatly appreciated.
Maybe this would work:
http://www.downcase.com/project/firequark