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:
Related
Note: I am using the INSPINIA administrative theme and this question is an extension of the following question: How do I install bootstrap 4 template to Ember web project?
How do I get css animations working in Ember?
I am attempting to get the collapse-able sidebar navigation menu working (see the INSPINIA link here). Currently, I do not see the arrow and the menu is displayed only in expanded form in the <ul class="nav nav-second-level">...</ul> block of code.
In looking at the sample projects and View Source page, there appear to be a lot of add-ons that INSPINIA uses. Do I need to install all of them? Or, do I just need jQuery?
Here is the code for my handlebar file in question.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
{{#if session.isAuthenticated}}
<li class="active"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Update Information</li>
<li>{{#link-to "clients.change-password"}}Change Password{{/link-to}}</li>
<li><a href="#" onclick={{action "logout"}}>Logout</a></li>
</ul>
</li>
{{else}}
<li>{{#link-to "clients.login"}}Login{{/link-to}}</li>
<li>{{#link-to "clients.register"}}Register{{/link-to}}</li>
{{/if}}
<li>{{#link-to "misc.about"}}About{{/link-to}}</li>
<li>{{#link-to "misc.contactus"}}Contact Us{{/link-to}}</li>
</ul>
</div>
</nav>
I'd suggest using Liquid Fire.
Liquid Fire is a toolkit for managing animated transitions in an Ember application.
You can use the transition.js file to manage the duration, direction, timing etc. of CSS transitions in your app.
You may use Ember Animated if you need more control over your animations.
I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?
Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
</li>
</ul>
In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class
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.
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