I am working on a pretty basic website and I have the search bar exactly how I want it to look. The problem is that I cannot get the search button to be responsive to different devices. On my iPhone 6, the button moves below the search bar and doesn't look right. Any thoughts on how I can get this better looking? I am new to responsive templates!
Try clear fix:
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
Related
I need to remove text from my button if the screen is small in size. Which I did using Flex API. I also need to change the button style to "mat-mini-fab" from "mat-raised-button". How can make this button attribute conditional? ex on small screen attribute "mat-mini-fab" should be applied else "mat-raised-button". Preferring to use Flex API here something like fxShow fxHide used for elements.
<button matTooltip="Save" mat-raised-button (click)="saveMember()" color="accent" class="submit-button" aria-label="SAVE" [disabled]="memberForm.invalid">
<mat-icon>save</mat-icon><span fxHide fxShow.gt-sm>SAVE</span>
</button>
mat-raised-button and mat-mini-fab are directives (actually they are part of a directive selector), and directives can not be made conditional. Your only option is to have different button elements for each directive/type screen size and use the flex api to show or hide them accordingly. For example:
<button mat-raised-button fxHide fxShow.gt-sm>
<mat-icon>save</mat-icon>
SAVE
</button>
<button mat-mini-fab fxShow fxHide.gt-sm>
<mat-icon>save</mat-icon>
</button>
I am creating an Electron project and I am using Bootstrap Fileinput.
<div class="form-group">
<label class="control-label col-xs-3">Folder containing installation/patch scripts</label>
<div class="col-xs-9">
<input id="input-2" name="input2" type="file" class="file" data-show-upload="false" data-show-preview="false" data-show-cancel="false" webkitdirectory>
</div>
</div>
The control is rendered fine and works. The issue is that, as soon as the control is rendered, I can see "0%" above it. No matter what I have tried I cannot remove that. I don't want a progress bar to be visible, the control will work only to locate a folder name, which will then be used for other purposes.
Any ideas why I always see the progress bar?
I found the solution. I had to add the following option in js code when I create fileinput:
layoutTemplates: {progress: ''}
The Close Button seems to be a good way for displaying a notice which the user can click away. But its usage remains rather elusive to a newb.
I have placed one on a page:
<div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
But now I am unaware of any way of changing its color the Zurb way, or where to find closing animation options other than this one I use above. I would like the button to be colored e.g. as a Zurb success, and a fade out effect rather than the confusingly fast slide out effect. How do I go about that?
Actually I would also like the button to tightly wrap around the notice text, not take up the whole line width. Is that doable in any Zurb-idiomatic way?
Thanks!
To change the color of close button or other style, you can code the CSS like
.close-button{
color:red;
}
If you are using SASS you can customize the variables.
http://foundation.zurb.com/sites/docs/close-button.html#sass-reference
The animations you can use are:
slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw
http://foundation.zurb.com/sites/docs/motion-ui.html
You can add the callout to a column 1 to 12 wide (although 12 wide is what you already have with the callout on its own). Here I have added it to a 2 wide column. By removing the slide-out method it uses the default fade-out.
<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
</div>
</div>
I'm trying to create an ionic app which has a left and right sidemenu, but I'm finding that the side-menu icons (and the ability to swipe left or right to open them) is disappearing when I try to navigate. I'm obviously doing something wrong, but I can't see what it is.
see here ... http://plnkr.co/NpqmVT ... for plunker which demonstrates the problem. To replicate the bug simply click on the 'click to view details' button.
My main user interface (I'm guessing this is where I'm doing something wrong) looks like this...
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="centre-panel"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Main Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="ui.page1" nav-clear menu-close >Page 1</ion-item>
<ion-item ui-sref="ui.page2" nav-clear menu-close >Page 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-nav-view name="right-panel"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
All the routes, etc can be found in the plunkr (http://plnkr.co/NpqmVT)
Thanks for any help you can offer.
just faced the same problem and found a solution - add this directive to the ion-side menus:
<ion-side-menus enable-menu-with-back-views="true">
I am using Masonry - the HTML version
I have a div:
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item"}'>
within I have about 10:
<div class="item">
<img src="<?php the_field('image'); ?>" alt="<?php the_title(); ?>">
<p></p>
<a style="text-decoration:underline;" class="link-port" href="<?php the_field('link'); ?>" target="_blank"><?php the_title();?></a>
<p></p>
</div>
The problem is that when the page loads first time (uncached) the first few items show normally, but further down the page they stack on top of each other. They also overlap the footer.
If you either refresh the browser (or rotate the device) then all works fine but this is obviously not ideal for new visitors.
The JS was at the bottom of the page, but I moved to the top and it still did the same.
Has anyone come across this before?
Many thanks.
Aha! imagesLoaded seems to be the answer, full details here: http://masonry.desandro.com/appendix.html#imagesloaded