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>
Related
I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>
I am using the Firefox webdriver for Selenium to scrape a webpage that looks to be rendered with React on the client side. The classes in the rendered DOM look dynamically generated, and seem to change with every new request. There are also many button elements on the page, some of which are not in the viewport. So my strategy is to search for a way to click on a button that contains text that I enter using selenium. Several buttons will contain the text, and I want to just find the first such button.
Using selenium/xpath, how would I select the first button that contained the text E9 1QJ?
<button>
<div><svg ...> </div>
<div>
<div>London</div>
<div>E9 1QJ</div>
</div>
</button>
<button>
<div><svg ...> </div>
<div>
<div>London Foo Bar</div>
<div>E9 1QJ</div>
</div>
</button>
Thanks
This should work:
{driver}.find_element_by_xpath("//button[div/div[text()='E9 1QJ']][1]")
But keep in mind that a solution like this it is not very flexible and could break with a minimum change in the html structure.
I am trying to create multi-column combo-box in Kendo-Angular 2.I can't find it in the documentation: https://www.telerik.com/kendo-angular-ui/components/dropdowns/ Is this option present in the Kendo support for Angular 2?
The MultiSelect component provides numerous templates, which could be used to control the rendering of the header, footer and the item content. That being said, we can easily achieve different layout using some additional styling.
<kendo-multiselect
[data]="listItems"
[(ngModel)]="value"
[textField]="'text'"
[valueField]="'value'"
>
<ng-template kendoMultiSelectHeaderTemplate>
<div class="dropdown-header k-widget k-header">
<span>Value</span>
<span>Text</span>
</div>
</ng-template>
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<span class="k-state-default"><h3>{{dataItem.value}}</h3></span>
<span class="k-state-default"><h3>{{dataItem.text}}</h3></span>
</ng-template>
</kendo-multiselect>
Here is a plunker that demonstrates the templates usage:
http://plnkr.co/edit/BvdyXuQ4TQ5OFwDliqYd?p=preview
Please note, that the component doesn't have table-like layout and you will need to implement it manually. Nevertheless as it is shown in the demo, this shouldn't be a tough task.
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>
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>