I'm using foundation 6 to make an ajax powered site. The index page uses off canvas and tabs for navigation. But when I added the jquery datepicker widget and the corresponding css, it is adversely affecting the appearance of my navigation bar.
I make no reference to the ui classes in my navigation source code, but foundation or something is putting them into the served version.
for example:
source code snippet:
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
but firebug shows:
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="select-sections" aria-selected="false" aria-expanded="false">
<a id="select-sections" class="hollow button secondary disabled ui-tabs-anchor" href="#tabs-2" data-open="offCanvasLeft" role="presentation" tabindex="-1" aria-expanded="false" aria-controls="offCanvasLeft"> §§ </a>
</li>
Obviously, when I add the CSS for datepicker widget, It's using css styles that I never intended to use on my menus. I really don't want it to add stuff like "ui-state-default" and "ui-corner-top" to my code.
Two possible ways I can see to potentially solve the problem, just don't know how to accomplish it:
Somehow prevent the addition of ui-* classes to my navigation
Somehow make the css apply only to the datepicker
If it helps, here is a simplified listing
<body>
<div class="full-height">
<div id="topbar" class="top-bar">
<div class="top-bar-title"> The site title... </div>
<div>
<div id="top-bar-left-content" class="top-bar-left"></div>
<div id-"top-bar-right-content" class="top-bar-right">
<form>
<ul class="logged_in menu">
<li>Date: </li>
<li><input type="text" id="datepicker" name="today" value="<%= #today %>"></li>
<li><input class="button primary" type="submit" value="Change Date"></li>
<li><button id="select-help" class="button primary">Help</button></li>
</ul>
</form>
</div>
</div>
</div>
<span id="notice"><%= notice %></span>
<!-- wrap entire document (2 divs) -->
<div class="off-canvas-wrapper container"><div class="off-canvas-wrapper-inner fill" data-off-canvas-wrapper>
<!-- tabs wrap around off-canvas and off-canvas data. using .tabs class distorts display. -->
<div id="tabs" class="fill ">
<!-- off canvas left (hidden) part -->
<div id="offCanvasLeft" class="off-canvas position-left fill" data-off-canvas data-close-on-click=false>
<!-- tabs content -->
<aside>
<div id="tabs-1">A list of links...</div>
<div id="tabs-2">A list of links...</div>
<div id="tabs-3">A list of links...</div>
<div id="tabs-4">A list of links...</div>
<div id="tabs-5">A list of links...</div>
</aside>
</div><!-- end off canvas left -->
<!-- rest of the page (on canvas) -->
<div id="left-scroll" class="off-canvas-content rows fill" data-off-canvas-content>
<!-- sidebar icons. these select the tab to display -->
<ul id="sidebar-closed" class="menu vertical sidebar-closed">
<!-- toggle sidebar -->
<li id="toggle-oc">
<a class="hollow button secondary" data-toggle="offCanvasLeft">
<i id="toggle-menu" class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
<!-- search -->
<li>
<a id="select-search" href="#tabs-3" class="hollow button secondary is-active" data-open="offCanvasLeft">
<i class=" fa fa-search" aria-hidden="true"></i>
</a>
</li>
<!-- part list -->
<li>
<a id="select-parts" href="#tabs-1" class="hollow button secondary" data-open="offCanvasLeft">
<i class=" fa fa-list" aria-hidden="true"></i>
</a>
</li>
<!-- section list -->
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
<!-- letter list -->
<li>
<a id="select-letters-list" href="#tabs-4" class="hollow button secondary disabled" data-open="offCanvasLeft"><!-- data-pushstate="/sidebar_actions/letters" -->
<i class=" fa fa-files-o" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- main window content -->
<main>
links in the tabs are displayed here
</main>
</div><!-- rest of page (on canvas) wrapper -->
</div> <!-- tabs wrapper -->
</div></div> <!-- outer 2 off-canvas wrappers -->
</body>
and the css is loaded via application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*= require jquery-ui/datepicker
*= require font-awesome
*/
I made the css apply only to the datepicker widget. For Ror:
Use firebug to determine the id of the wrapping div.
Use jQuery Download Builder to generate the CSS you need. Add id from step 1 to the CSS Scope input.
Remove *= require jquery-ui/datepicker from application.css.scss
Make new file in app/assets/stylesheets and paste generated stylesheet
Change any references to url(images/* to url(/images/*
Copy required images to public/images/
Related
I have a navbar dropdown in my header and one in the body of my page. Currently, the navbar dropdown works. However, when I click on the icon that I've set to trigger the other dropdown, nothing happens.
Navbar dropdown:
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse" id="desktop-header">
<ul class="navbar-nav">
<li class="nav-item dropdown pe-4">
<a class="nav-link dropdown-toggle text-dark fw-bold" href="#" role="button" data-bs-toggle="dropdown">Log</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
</div>
</div>
The other dropdown outside of the header:
<div class="dropdown d-inline">
<a href="#" role="button" data-bs-toggle="dropdown">
<span class="mdi mdi-18px mdi-flag-outline text-dark me-2"></span>
</a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
</ul>
</div>
Here's the console error I get when trying to open the second dropdown:
bootstrap.source.js:2174 Uncaught TypeError: Popper__namespace.createPopper is not a function
at Dropdown._createPopper (bootstrap.source.js:2174:1)
at Dropdown.show (bootstrap.source.js:2063:1)
at Dropdown.toggle (bootstrap.source.js:2041:1)
at HTMLAnchorElement.<anonymous> (bootstrap.source.js:2400:1)
at HTMLDocument.handler (bootstrap.source.js:411:1)
Here is how I've included Bootstrap JS, taken straight from the v. 5.2.x docs:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
type="application/json">
</script>
I've also tried including Popper and Bootstrap separately, again per the official docs.
Further, when I don't include type="application/json" the dropdown in the body (outside of the navbar) works but the navbar dropdown doesn't. Conversely, when I include type="application/json" the navbar dropdown works but the other one doesn't.
How do I get both dropdowns to work correctly?
In my Rails layout file, I had two sections -- content_for :head_javascripts and content_for :body_javascripts.
It was in :body_javascripts that I was trying to include Popper and Bootstrap per the documentation's instructions.
By adding the following lines:
<%= javascript_include_tag 'railsapp' %>
<%= javascript_include_tag 'libs/bootstrapapp' %>
to the :head_javascripts section and deleting :body_javascripts, I got both dropdowns to work.
Any insight into why exactly this solution worked and not when I tried including Bootstrap in :body_javascripts is welcome.
I am following the Material Components Web docs. As a template of the page I am using the very basic template as detailed in the quick start - My undertsnading is that this template is a "including all" template:
it uses:
node_modules/material-components-web/dist/material-components-web.css
and,
https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js
(complete code below)
Seem like Persistent Drawer and Permanent Drawer are not displayed as expected. Not slidable, not aside to the left, not stretching its height.
Note that the Temporary drawer does work as expected.
What am I missing?
<!DOCTYPE html>
Material Components for the web
<aside class="mdc-persistent-drawer mdc-typography">
<nav class="mdc-persistent-drawer__drawer">
<header class="mdc-persistent-drawer__header">
<div class="mdc-persistent-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
<a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>window.mdc.autoInit();</script>
<script>
let drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-persistent-drawer'));
drawer.open = true;
</script>
In order to be displayed as expected, meaning: aside to the left, stretching vertically with 100% height, some css style need to be added. Style values can be taken from the demos package: here. Also note the classes added to the body element as detailed in the permanent drawer demo.
I have been working with MVC for a few months and its going well, but I can't figure out how to create a Sidebar menu all the way to the utmost left of the screen.
This is a standard MVC 5 web application.
What I think the problem is, is that in _Layout View, the
#RenderBody()
falls within the div tag:
<div class="container body-content">
So all code in any of my created Views is contained in that container.
Is this even the reason?
My View:
<h2>TestSideBar</h2>
<div class="container" id="sidebar" style="margin-left: 0px">
<div id="wrapper" class="wrapper">
<!-- Sidebar -->
<div class="nav navbar-left">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
Placeholder
</a>
</div>
<ul class="nav">
<li>
<a href="#Url.Action("Item1", "Controller")">
<span class="glyphicon glyphicon-off "> Item 1</span>
</a>
<a href="#Url.Action("Item2", "Controller")">
<span class="glyphicon glyphicon-star "> Item 2</span>
</a>
</li>
</ul>
</div>
</div><!-- end navbar-left -->
</div><!-- end sidebar container -->
<div class="main-panel">
Main Content Stuff Here
</div><!-- end main-panel -->
</div><!-- end wrapper-->
I have attached 2 images, how it looks now and how I want it to look
I have tried using the #section RenderLeft as well.
I just can't get it to look the way I want.
Thanks.
Well I have found two ways to do this so far. There could be better ones out there.
Firstly I was correct in my assumption that the container div in _Layout View was causing the problem.
Option 1
In the _Layout View, before the container div and RenderBody, use #RenderSection code
#RenderSection("LeftMenu", required: false)
<div class="container body-content">
#RenderBody()
Then in the View you want the menu, enclose the menu code in:
#section LeftMenu{
<!-- Content Here -->
}
The "LeftMenu" is just a name, any name can be used here.
This causes the code in the #section to be "run" before the RenderBody.
This works, but has a drawback in that since I possible want to use the menu in more than one View, I have to add the #section LeftMenu {} code in each View I want it because you cannot use #section {} in a partial view.
Option 2:
In _Layout View, remove the container div that encloses #RenderBody
In each View enclose the code in a container div. Create the menu in a partial view and render it (#Html.Partial) in each view you need it, before the content code.
Neill
You can use Html.RenderPartial
Create a view, e.g: _LeftMenu.csthml and put it in the "Views/Shared" folder.
Put the left menu html in that view, example(this can of course be done with Divs and a Model if you prefer)
<ul class="list-group">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
</li>
</ul>
Then divide the content area in your Layout page into two, one for your left menu and the second for the render body area that will contain the child pages:
<body>
<header>
</header
<div class="row col-md-12 FullContent">
<div class="col-md-2 CustomLeftnavbar">
#{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
</div>
<div class="container col-md-10">
<main role="main" class="CustomBody">
#RenderBody()
</main>
</div>
</div>
</body>
This way you will not need to go against the DRY principle as it will be shared with any and all other pages that uses the same layout page
I am trying to use bootstrap's carousel inside an angular.dart component. Here is the html:
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol ng-repeat="pic in ctrl.pics" class="carousel-indicators">
<li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li>
</ol>
<!-- Slides -->
<div ng-repeat="pic in ctrl.pics" class="carousel-inner">
<div class="item" ng-class="{ active: {{$first}} }">
<img src="{{ ctrl.pic.image }}">
<div class="carousel-caption">{{ ctrl.pic.title }}</div>
</div>
</div>
<!-- Controls -->
<a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.
Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.
Any suggestions?
There may be two issues:
JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.
Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.