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).
Related
So I am using angular-cli 8.3.5 and material-angular 8.2.1.
I am trying to center my HTML but not finding any document on helper classes.
Does anyone know how to accomplish the task I am doing?
Documentation: https://material.angular.io/components/categories
To center you can use Angular-Flex-Layout. (Demos: https://tburleson-layouts-demos.firebaseapp.com/#/docs)
import { FlexLayoutModule } from '#angular/flex-layout';
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<div>CONTET TO CENTER</div>
</div>
The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a height.
Try something like this :
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="min-height: 500px">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
I have created a dynamic HTML label. When is rendered by orbeon runner first it shows correctly but when I add a new item in a repeated grid inside it gets duplicated
The HTML label is like this:
<div class="form-table--head">
<div class="content-left">
<p class="property--title"></p><span class="property--qty">{$itCount} counted</span>
<div class="box-info box-link-popup hidden-xs">
<div class="box__popup" tabindex="-1">
<p>Options:</p>
<ul>
<li>Option 1.</li>
<li>Option 2.</li>
<li>Option 3.</li>
</ul>
</div>
</div>
<p class="property--amount property--amount-xs">{$itSum} €</p>
</div>
<div class="content-right">
<p class="property--amount hidden-xs">{$itSum} €</p>
<div class="header-menu">
<ul>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
</div>
</div>
Here is the entire form source code: https://pastebin.com/P3VK4hKm
Here is the behaviour first time:
And here after add a new iteration:
I am using Orbeon 2018.2.3 PE
The behavior you noticed is caused by a bug, which is fixed in Orbeon Forms in 2019.1. For reference, the issue is tracked as #4136.
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'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'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.