I have bootstrap.js installed and I'm having trouble getting a popover to show up on click.
Here is my html:
<span data-sentenceindex="1">
<div class="word" data-wordid="EA9jNKEAiHmZDwFp7" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">Shang4di4</p>
<h3 class="thinnerTop">你好</h3>
</div>
<div class="word" data-wordid="6gNwivPpCpyfstTjC" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">fa1chu1</p>
<h3 class="thinnerTop">发出</h3>
</div>
</span>
Here is my template:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
Here is the onRender:
Template.word.onRendered(function() {
return $('[data-toggle="popover"]').popover()
})
What am I missing?
The answer is that I need to add tabindex="0" to the div.
Like this:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
tabindex="0"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom text-muted">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
Related
I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
I have a following HTML with Angular FlexLayout in it
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-between">
<span >
3123131
</span>
<span >
1231231
</span>
<span >
6568
</span>
<span >
989
</span>
</div>
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<div class=" line first"></div>
<div class=" line red"></div>
<div class=" line first"></div>
<div class=" line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
<span class=" large" style="text-align: left;">
12<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
68<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: left;">
45<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class=" " style="text-align: right;">
684
</span>
<span class=" ">
3514
</span>
<span class=" ">
21
</span>
<span class=" ">
354
</span>
</div>
</div>
The output of this is as below,
But I want them to be evenly aligned in the same straight line, I can't figure out what mistake I'm making in this
Stackblitz
To make horizontal alignment easier, you can define each item as having no width and a centered content. That can be achieved with an inline-flex container:
.centered {
display: inline-flex;
justify-content: center;
width: 0px;
}
After setting the centered class on the items to align, make sure that you use the same spacing on all lines (either space-around or space-between). This stackblitz shows what it looks like when space-around is used:
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">3123131</span>
<span class="centered">1231231</span>
<span class="centered">6568</span>
<span class="centered">989</span>
</div>
<div fxLayout fxLayoutAlign="space-around">
<div class="centered line first"></div>
<div class="centered line red"></div>
<div class="centered line first"></div>
<div class="centered line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
<span class="centered large">12<span class="percent">%</span></span>
<span class="centered large">68<span class="percent">%</span></span>
<span class="centered large">45<span class="percent">%</span></span>
<span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout fxLayoutAlign="space-around">
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">684</span>
<span class="centered">3514</span>
<span class="centered">21</span>
<span class="centered">354</span>
</div>
</div>
I am trying to place two elements side by side. I used css inline block but surprisingly its not working.
<div class="item-body" style="display:inline-block">
<!--- Element 1--->
<div style="width:150px;" class="input-group">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt===1?1:selectedItem.qnt-1;updateSelectedItemData();" class="btn spinner-down red" type="button">
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" style="text-align: center;" ng-model="selectedItem.qnt" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt+1;updateSelectedItemData()" class="btn spinner-up green-haze" type="button">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--- Element 2--->
<div > x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
Element 1 and element 2 is appearing in different line
You need to apply display: inline-block; to each element that you want to be displayed in the same line, not to their parent container. I've added background-color so it's clearly visible where each <div> is exactly located. For both inline-blocks to be aligned vertically, use css property vertical-align.
.item-body > div {
vertical-align: text-top;
}
<div class="item-body">
<!--- Element 1--->
<div style="display: inline-block; width:150px; background-color: #f8f8f8;">
<div>
<button>-</button>
</div>
<input type="text" style="text-align: center;">
<div>
<button>+</button>
</div>
</div>
<!--- Element 2--->
<div style="display:inline-block; background-color: #ddd;"> x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
Am trying to middle a set of icons to the middle of screen, below is the code:
<div data-role="content" class="ui-content ui-body-a" style="vertical-align: middle" data-theme="a">
<fieldset class="ui-grid-a icon-set" style="vertical-align: middle" data-theme="b">
<div class="ui-block-a center" style="vertical-align: middle">
<a href="test">
<div>
<img src="css/images/test5.png" style="width: 80px;height: 80px"/>
</div>
<div>
Login
</div>
</a>
</div>
<div class="ui-block-b center">
<a href="#settings" data-transition='slide'>
<div> <img src="css/images/test4.png" style="width: 80px;height: 80px"/></div>
<div>Settings</div>
</a>
</div>
<div class="ui-block-a center">
<a href="test">
<div> <img src="css/images/test2.png" style="width: 80px;height: 80px"/></div>
<div>Aboutus</div>
</a>
</div>
<div class="ui-block-b center">
<a href="test">
<div> <img src="css/images/test1.png" style="width: 80px;height: 80px"/></div>
<div>Contact Us</div>
</a>
</div>
</fieldset>
</div>
vertical-align does not work as most people would expect - this property is only available for tables or elements that have style of table-cell or similar (http://www.w3schools.com/cssref/pr_class_display.asp)
you will need to give the DIV element a default size for this to work as well... check this JSBin example and this StackOverflow answer for more insight
Do this:
<div data-role="content" class="ui-content ui-body-a" style="text-align: center;" data-theme="a">
and then this for any div you want to center:
style="margin:0 auto;"
My dropkick look strange - http://i.imgur.com/0itAA.png
Container is bigger, than dropdown list.
My html:
<div class="text_over_field">
<b>Your language preferences</b>
<b>This is language you would like Print-it-Green service to be displayed in</b>
</div>
<div class="field">
<div class="dk_container dk_theme_default" id="dk_container_color" tabindex="7" style="display: block; ">
<a class="dk_toggle" style="width: 149px; ">
<span class="dk_label">English</span></a>
<div class="dk_options" style="top: 29px; ">
<ul class="dk_options_inner">
<li class="dk_option_current"><a data-dk-dropdown-value="">English</a></li>
<li class=""><a data-dk-dropdown-value="#E15A01">Israeli</a></li>
<li class=""><a data-dk-dropdown-value="#604A42">Ukrainian</a></li>
</ul>
</div>
</div>
</div>
<div class="submit" >
</div>
Check the CSS markup
Check the HTML markup
All is wrapped in form_for_new class.
Also, it crashed my form.
What you can say about it ?