I am developing something in a Right-To-Left (RTL) language and I need the text in the collapsible to be positioned on the right as opposed to the default left.
Here is the code:
<div id="content_c1" data-role="collapsible" data-iconpos="right" align="right">
<h3>Right to Left Text</h3>
<p>Right to Left Content</p>
</div>
<div id="content_c2" data-role="collapsible">
<h3></h3>
<p></p>
</div>
The first collapsible is Right to Left. The data-iconpos="right" nicely movees the icon to the right and the align="right" moves the content in the <p> to the right. But the text shown in <h3> stays on the left.
Thanks for the help in advance.
This is working for me:
.ui-collapsible h3 .ui-btn-inner
{
text-align:right;
}
I'm sure there is a better way but you could try this.
.ui-btn-text{float:right}
Having the same problem...
This one solved it :
.ui-collapsible-heading .ui-btn {
text-align: right;
}
Related
In Angular 6, I am using material side-nav & also using material-tree:
Parent:
<mat-sidenav-container class="sidenav-container" autosize>
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="false"
[mode]="sidenavMode"
[opened]="sideNavOpen"
(closed)="sideNavOpen = false"
[ngClass]=" !sideNavOpen ? 'showToggle' : '' ">
<app-side-nav (toggledSidebarCollapse)="toggleSideBar()"></app-side-nav>
</mat-sidenav>
<mat-sidenav-content
autosize
fullscreen
[style.height.px]="windowHeight()"
[ngClass]=" !sideNavOpen ? 'body-conainer_collapse-view' : 'body-conainer_open-view' "
color="primary">
<mat-toolbar >
<span>HOME</span>
</mat-toolbar>
<ng-container *ngIf="iframeDisplay">
<iframe width="100%" height="100%" [src]="iframeUrl | safeUrl" scrolling="yes"></iframe>
</ng-container>
</mat-sidenav-content>
</mat-sidenav-container>
Child:
<div class="header" fxLayout="row" fxLayoutAlign="start center">
...
<div class="mat-tree_container">
<mat-nav-list>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<a class="mat-tree-node link-item">
<button class="side-bar-button" mat-icon-button>
<mat-icon class="mat-icon-rtl-mirror">
insert_drive_file
</mat-icon>
</button>
{{node.reportName}}
</a>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<li>
<div class="mat-tree-node">
<button class="side-bar-button" mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.reportName">
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
</mat-icon>
</button>
{{node.reportName}}
</div>
<ul [class.tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</mat-nav-list>
</div>
The data I get back, however, is dynamic. It might be nested x amount deep. With the material-tree, that could extend past the width I have set (240px).
Material's mat-side-nav doesn't appear to support horizontal scrolling. If the folder structure passes the width, the sidenav just uses word-breaking and does not allow horizontal scrolling.
Just trying to enable horizontal scrolling inside of mat-side-nav...
Update:
Attempted using "white-space: nowrap" to the styling. Only affected anything if added to the top layer (mat-sidenav). Scrolling was then enabled -- but produced the following:
No amount of css appeared to expand the width to meet the overflow.
Most likely, this is the node component itself, not sidenav. Try adding white-space:no-wrap; to the mat-tree-node class. Depending on the content inside the sidenav drawer, you may need to add the no-wrap elsewhere or otherwise control the layout so that the horizontal scrollbar can be shown by the parent component.
Current working (but possibly not best) solution -- thanks to #gtranter 's response.
mat-sidenav {
...
white-space: nowrap;
display: flex;
}
...
// for the width of the header -- if not increased - does not fill the space
especially after the sidebar width increases when opening folders
.header {
...
width: calc(100% + 55px);
...
}
This allows horizontal scrolling AND adjusts to new sizes as you continue to open up new folders - no foreseeable limit. Fits the size of the sidenav regularly with closed folders without scroll - scroll enables when required.
In ionic with ios platform, i want the following view:
The header
A fixed bar button
A scrollable list
So i have tried to make:
<ion-view view-title="Account">
<div class="button-bar" style="margin-top:66px;">
<a class="button">Item 1</a>
<a class="button">Item 2</a>
<a class="button">Item 2</a>
</div>
...
When i make ionic emulate ios, in the iphone simulator i don't see the bar button (i think because it's behind the header bar)
So i have added a margin-top:
<div class="button-bar" style="margin-top:44px;">
Now i see but a portion of the header bar is always on top of the bar button. It's because of the status bar? Which is the height of the status bar + header bar on the ios device?
To make a scrollable list (only the scrollable list) i must add a after the button-bar div?
HTML
<div class="button-bar" style="margin-top:66px;">
<a class="button">Item 1</a>
<a class="button">Item 2</a>
<a class="button">Item 3</a>
</div>
CSS
.button-bar
{
float:left;
overflow-Y:scroll;
height:50px;
width:150px;
}
.button
{
float:left;
width:100%;
}
see this Fiddle and try to scroll your Items. :)
To make everything clear and visual do float:left; and display:block; of your every element
I'm trying to have a select menu and a button inline, same width as surrounding lines, see this:
http://jsbin.com/hibatehepe/edit?html,output
Here it's done with field-container, but the select menu should be wider.
Any ideas please?
You can look at this question:
How to make a div to fill a remaining horizontal space?
mystrdat's answer based on this codepen: http://codepen.io/anon/pen/mdoej can work for you.
You basically use float: right to keep the button with a fixed width all the way on the right side, and then select's container automatically fills the available width. (NOTE: I am only using inline CSS to quickly illustrate the answer, you should use CSS classes):
<div class="ui-field-contain">
<label for="b" class="select">Vælg kategori:</label>
<div >
<div style="float: right; padding-left: 0.5em;" >
Tilføj
</div>
<div style="overflow: auto;">
<select size="1" name="b" id="b" data-native-menu="false">
<option value="choose-one" data-placeholder="true">MAKE ME WIDE</option>
</select>
</div>
</div>
</div>
Updated jsbin
When I place text buttons next to notext buttons in the header, the notext button show up slightly lower than. I've tried setting margin-top and padding-top for ui-btn-icon-notext, but that does not seem to have an effect.
<div data-role="header" class="ui-bar">
...
<div class="ui-btn-right">
Sign In
Home
...
</div>
</div>
Not really sure why it is happening but a quick (and dirty) fix could be like this:
a.custom-class-name-for-no-text-buttons {
top: -2px !important;
}
JSFiddle
http://jsfiddle.net/GG3qE/
I need to add the button on the right hand side of the footer. I am adding it like this
<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>
I am getting the button but it is coming at the start of the next line. If I change the role to header, the button positions perfectly. Even if I add class="ui-header" in footer div, it comes ok but then it simply doesn't get its position fixed. ('coz it has now both the style ui-footer and ui-header)
How can I put the button on footer on extreme right without sacrificing the data-position? (I need the data-position fixed also)
the footer has a right margin set to 90px by default. You need to override it and make the two controls float, like so:
<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain"
data-position="fixed">
<h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
Copyright 2011</h4>
<a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a"
data-ajax="false" href="/login.php?mode=logout">
Logout</a>
</div>
P.S. From usability point of view, I would have placed the "Logout" button in the top-right corner of the page rather than in a footer.
I found Tsar's answer helpful, though it doesn't seem like most of that markup is necessary. I get the same effect with
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
<a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
<h3>Copyright 2011</h3>
</div>
(I have only tested this in my desktop browser so far.) Looks like the magic is in the ui-btn-right class. There is also a ui-btn-left.