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.
Related
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!
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'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.
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