I need a button in the header section of a UI Boostrap Accordion group item. I was able to added the markup and it works, but the button is not in the middle (vertical) as soon as I add the class pull-right. Click here to view the Plunker. Without the class, the button is correctly positioned and aligned.
Wrap a span around the text and button inside the uib-accordion-heading. Style the span with display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;.
<uib-accordion-heading>
<span style="display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;">
I can have markup, too! <button class="btn btn-primary btn-sm">OPEN</button>
</span>
</uib-accordion-heading>
Updated plunker
Related
How can I add background image to whole bottom tab navigation instead of plain background color in react navigation v5.
For Example in below image, I want to add full width background image instead of plain blue color.
In the Jsx file
<a class="navbar-brand" href="/">
<div class="logo-image">
<img src="image" class="img-fluid">
</div>
</a>
In css file
.logo-image{
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
margin-top: -6px;
}
<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
Materialize-CSS: Can valign-wrapper & right-align be used together in a single h5 tag ?
What I have observed untill now is, When they are used together, the text inside h5 is vertically aligned but not aligning to the right.
I want my text be both vertical & right aligned.
Please let me know if you know how to achieve this.
TIA
Jagan
Use Flexbox
.parent {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="parent">
<h5 class="child">Hi this is testing</h5>
</div>
valign wrapper use display flex. So just add justify-content: flex-end; to align right in your div class in which you are using v-align.
Here is the code in jsfiddle
There are many other approaches to do this. One of them is, use valign wrapper for verticle center and make them relative and h5 as absolute and right:0 to make it right align. Here is the jsfiddle code
another one is,you can use make parent div as display:table and h5 as display:table-cell. Below is the snippet:-
.heading{
display: table-cell;
vertical-align: middle;
text-align:right;
}
<div style="height:300px; width:300px;background:red;display:table">
<h5 class="heading">Hi this is testing</h5>
</div>
Use the justify-content to .child too:
.child {
justify-content: flex-end;
}
when using the valign-wrapper for a tag it makes that element:
.valign-wrapper{
display:flex;
align-items:center;
}
you can add the following is your css to make it center aligned:
.valign-wrapper{
justify-content:flex-end;
}
I have a WinJS.UI.Flyout that I would like to have expand upward when content is added to it while it is visible. The flyout's anchor is at the bottom of the screen. If I call flyout.show(anchor, 'top'); it appears correctly at first, but then expands off the bottom of the screen when content is added. If I call flyout.show(anchor, 'bottom'); it expands upward, but it also covers over the anchor element, which I do not want.
This can be done by using -ms-flexbox display for the flyout and packing its content to the end.
flyout background can be set to transparent; it's size can be set to max possible; this way it serves as a outer container which aligns its content to the end. expandable content is placed inside another div flyout-content with background as white.
<div data-win-control="WinJS.UI.Flyout" id="flyout">
<div class="flyout-content">
expandable content here
expandable content here
expandable content here
expandable content here
</div>
</div>
css:
#flyout
{
background-color: transparent;
border: 0;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
height: 400px;
}
.flyout-content
{
padding: 20px;
background-color: white;
}
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.