I would like to justified my button group to whole width of parent.
I am trying to Justified button groups
Here is my code:
ButtonGroup buttonGroupHelper = new ButtonGroup();
Button loginButton = new Button("Log in");
Button resetButton = new Button("Reset");
Button forgotCredentialsButton = new Button("Forgot credentials?");
buttonGroupHelper.add(loginButton);
buttonGroupHelper.add(resetButton);
buttonGroupHelper.add(forgotCredentialsButton);
And I am getting this:
When I will add this line:
buttonGroupHelper.setJustified(true);
I am getting this:
I use bootstrap css darkly theme.
Here is html that my gwtbootstrap3 framework produce:
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-success"><i class="fa fa-play-circle-o"></i> Log in</button>
<button type="button" class="btn btn-danger"><i class="fa fa-times-circle-o"></i> Reset</button>
<button type="button" class="btn btn-warning"><i class="fa fa-key"></i> Forgot credentials?</button>
</div>
Am I doing something wrong. Or is this just a bug?
Please help.
You should put the buttons inside button groups and then put the button groups inside the helper button group.
ButtonGroup buttonGroupHelper = new ButtonGroup();
ButtonGroup loginBtnGroup = new ButtonGroup();
ButtonGroup resetBtnGroup = new ButtonGroup();
ButtonGroup forgotBtnGroup = new ButtonGroup();
Button loginButton = new Button("Log in");
Button resetButton = new Button("Reset");
Button forgotCredentialsButton = new Button("Forgot credentials?");
loginBtnGroup.add(loginButton);
resetBtnGroup.add(resetButton);
forgotBtnGroup.add(forgotCredentialsButton);
buttonGroupHelper.add(loginBtnGroup);
buttonGroupHelper.add(resetBtnGroup);
buttonGroupHelper.add(forgotBtnGroup);
buttonGroupHelper.setJustified(true);
Related
I have an issue with the class changing button. I use the [ngClass] directive to change the button style ( Bootstrap classes). But when I click the button, the "btn" class disappears from the code, so instead get 'btn-success btn', I get only 'btn-success'. The button also takes a part in showing and hiding a paragraph with random text.
This is TS code:
<button type="button"
(click)="onClick($event)"
[ngClass]="{'btn-success btn': showPass, 'btn-danger btn': !showPass }">{{status}}
</button>
<p [hidden]="showPass" >Secret password</p>```
and this is HTML:
onClick(event: Event) {
this.showPass=!this.showPass;
this.status = this.showPass ? "Show me!" : "Hide me!"
console.log(this.showPass)
If the btn class is always going to be there, you can just do this instead:
<button type="button"
(click)="onClick($event)"
class="btn"
[ngClass]="{'btn-success': showPass, 'btn-danger': !showPass }">{{status}}
</button>
I have this button
<button name="editAction" id="#editModal"
data-toggle="modal"
data-item="#item"
data-target="#editModal"
class="editAction btn btn-success btn-sm rounded-0" type="button"
data-placement="top"
title="Edit">
<i class="fa fa-edit"></i>
</button>
It is in the html table, now when user clicks the edit button, I want to pass the model data to the modal so that the user can edit the data.
I have editted my code so that,
before u open the modal. I set the selcted item
<script type="text/javascript">
jQuery(document).ready(function () {
$('.editAction').click(function () {
var item = $('.editAction').data("item");
alert(item);
#Model.SelectedAccount = item;
});
});
</script>
How can I toggle background color on multiple buttons.( reference images )
I have set of buttons. Once user click on any button it change the background color and if click again on same button other button the first clicked button reset to original color and change the 2nd click button.
code
<span class="input-group-btn">
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectToday('approved')"
>
Select Today
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectWeek('approved')"
>
To Current Week
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectMonth('approved')"
>
To Current Month
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="AllTime('approved')"
>
All Time
</button>
</span>
Can anyone give me clue how to bind the class with each other
image
You can make it dynamic like this:
Working Demo
TS:
selected = null
buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];
Template:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
{{btn}}
</button>
</ng-container>
To change the color of next button on deselection of already selected btn, try this:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
{{btn}}
</button>
</ng-container>
You can use radio button and customize it's display style instead of using Button directly. I am sure i will solve your problem. Just refer to this link:
Convert Radio button to Button
Give an index or id to each button and give the index on click
(click)="enableDisableRule(2)"
in your ts, save the index:
enableDisableRule(selectedIndex:number){
...
if(this.selectedIndex = selectedIndex){
this.selectedIndex = null;
} else{
this.selectedIndex = selectedIndex;
}
}
And in your html, update you button acording to selectedIndex:
[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"
Or something in this spirit.
I needed help to get the best possible element locator can I use for a button with the following code;
<button onclick="btnProcess($(this), 'Adding...','fa-refresh fa-spin',0);callServer('/DejavuMobile/action/UserGroupModel_AddItem/Users/Add?hfUsername=8_44&ic=44&hfService=', function(response){ btnProcess($(this), 'Add new item','fa-plus',1);loadContent($('#UserAddUI') ,response); });" class="btn btn-xs btn-labeled btn-info" type="button" style="padding-right:12px;padding-left:12px;margin-left:15px;margin-bottom:15px;"><span class="btn-label"><i class="fa fa-plus"></i></span>Add new Group</button>
The most readable one:
//button[text()='Add new Group']
It's possible to create path using class or any other attribute, but by text in this case is the most clear and easy way.
I have a button at the moment, rendered in my MVC application as:
#Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { #class = "btn btn-danger", #onclick = "return confirm('Are you sure you want to delete this Transfer?')" })
I want to use the Twitter Bootstrap classes to add an icon. However, for that the code would look like this:
<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>
How can I apply this in my ActionLink? It has an Image (i) embedded in the button.
Try:
<a class="btn btn-danger"
href="#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"
onclick = "return confirm('Are you sure you want to delete this Transfer?');"
>
<i class="icon-white icon-trash">Delete</i>
</a>
According your routes, it's possible you need:
#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)
According to the bootstrap documentation (http://getbootstrap.com/components/#glyphicons-examples) glyphicons might be the way to go. Here is an example of putting an icon on a button:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Since ActionLink() is an htmlHelper extension that returns an "a" element, i.e., <a>...</a>, I believe the extension needs to be overridden.
I tried the following, but it resulted in the glyphicon being above the "a" element:
<span class="glyphicon glyphicon-star"></span>#Html.ActionLink("Delete", "DeleteTransfer")
I also tried putting the ActionLink() inside the <span></span> with the same results. I tried using css with text-wrap: none; and white-space: nowrap; but that didn't work either.
So I believe the answer is the extension needs to be overridden to accept another parameter for the glyphicon. Unless, someone can show a trick to make it stop wrapping.