I had a html/css code like this
using font at http://fontawesome.io/icons/
and <i class="fa fa-times"></i> is the font icon.
<button class="btn btn-default"><i class="fa fa-times"></i> restore</button>
Now, I want to change it to ASP.NET WebControls . However I can't add font within it. Anyone has way,thanks.
<asp:Button ID="Button1" runat="server" Text="restore"/>
You can't with the default asp.net button you will need to use a HTML button and give it runat=server attribute:
<button runat="server" id="btnRun" class="btn btn-mini" title="Search">
<i class="icon-camera-retro"></i> Search
</button>
So use code behind with this you add:
onserverclick="functionName"
To the button, then in your C# do:
protected void functionName(object sender, EventArgs e)
{
Response.Write("Hello World!!!");
}
So final button looks like:
<button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
<i class="icon-camera-retro"></i> Search
</button>
Related
<div class="modal-footer">
<button class="btn cancel-red" type="button" ng-click="cancel()">Cancel</button>
<button class="btn confirm-blue" type="button" disabled="disabled=" ng-click="confirm())">Confirm</button>
</div>
I want to click the button, but the code I'm using doesn't work,Help me, please again!!
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].disabled='';") don't work.
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].click();") don't work.
How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.
I am new in ag-grid, I am using ag-grid in the angular5+ app.
I have implemented a custom column level filter by implementing IHeaderAngularComp interface. it's working fine in desktop/laptop. but it's not working in touch devices like iPad/mobile etc.
it seems to the header is not detecting touch event.
In the custom header, I implemented an input text box. it's working fine in desktop but when I use touch device iPad/mobile, the input box gets disable.
ag-Grid version: X.X.X
"ag-grid": "15.0.0",
"ag-grid-angular": "15.0.0"
Angular version: 5.1.2
//custom-header.component.html
<div>
<a class="btn btn-sm text-truncate py-0" [ngStyle]="{'width':'98%'}" (click)="sortBy($event)">
<i class="fa" [ngClass]="{'fa-sort-desc': currentOrder=='desc', 'fa-sort-asc': currentOrder=='asc'}"
[hidden]="!currentOrder"></i>
<span>{{params.displayName}}</span>
</a>
<div class="input-group input-group-sm pl-2" [ngStyle]="{'width':'90%'}" *ngIf="params.bISActiveForFilter">
<input type="text" class="form-control form-control-sm align-self-center filterTxtBox py-0" name="search"
(keyup.enter)="onEnterPress($event)" [(ngModel)]="searchText">
<span class="input-group-btn filterTxtClsBtn" [hidden]="!searchText">
<button type="button" class="btn btn-outline-secondary btn-sm py-0" (click)="clearColFilter($event)"><i
class="fa fa-times"></i></button>
</span>
</div>
And from the parent component, I'm calling custom-header component as below
columnDef.headerComponentFramework = CustomHeaderComponent;
I'm trying to make these buttons display next to each other, I'm guessing I would want it to be an inline-block style so there is some space between them. I have tried to add display: inline and display: inline-block (not at the same time) to #being-survey-btn, but no luck there. I've also attempted to add those properties to .btn but no luck there either. I've tried putting <span> tags around all of it (inside the divs) as well as putting <span> tags around the <button> tags and I've come up with nothing. Using bootstrap.
My cshtml:
<div id="finish-survey-container">
<div id="finish-survey-items">
#using (Html.BeginForm("MakePDF", "HabitatManagement"))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
}
#if (ViewBag.Type == "Habitat Management")
{
using (Html.BeginForm("Index", "HabitatManagement", new { userId = ViewBag.UserID }))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
}
}
</div>
</div>
I have also attempted styling through an ActionLink (this is actually how I originally had it before trying out Html.BeginForm syntax):
#Html.ActionLink("Save as PDF", "MakePDF", null, new { #id="begin-survey-btn", #class = "btn btn-default btn-lg", #style = "display: inline-block"})
I know I must be missing something rather obvious. Anybody have an idea?
EDIT
Generated HTML:
<div id="finish-survey-container">
<div id="finish-survey-items">
<form action="/HabitatManagement/MakePDF" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
</form>
<form action="HabitatManagement?userId=#" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
</form>
</div>
</div>
Each Html.BeginForm creates a form element, so your code will end up like
this
<form>
<button>..</button>
</form>
<form>
<button>..</button>
</form>
Your problem is that the form elements are by default block. That is what you need to fix, and to do that you should set these form elements to be display:inline-block
Something like
#finish-survey-items form{display:inline-block;}
I use toolbar.Template() and Toolbar.Excel() but toolbar.excel() don't show, just toolbar.Template() show.
.Excel(excel => excel
.FileName("Khu vực.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
//Cài đặt thanh Menu bên trên Grid
.ToolBar(toolbar =>
{
toolbar.Excel().HtmlAttributes(new { #class = "btn btn-danger", style = "float: left" });
toolbar.Template(#<text>
<div class="toolbar" style="float:right">
<a class="btn btn-danger k-grid-add" href="#">
<i class="glyphicon glyphicon-plus"></i> Thêm mới
</a>
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
Nhập bằng Excel
</button>
</div>
</text>);
})
I delete toolbar.Template(), Toolbar.Excel() show(picture following):
http://i.imgur.com/QR35aQE.png
I keep toolbar.Template(), it don't show:
http://i.imgur.com/aONQPzg.png
Help me, please!
Thank you!
P/s: I want button "Nhập bằng Excel" in front of button "Export to excel".
In order for the Excel button to show up on your toolbar you'll have to include the HTML for it inside the template.
In your case it would be something like this:
.Excel(excel => excel
.FileName("Khu vực.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
//Cài đặt thanh Menu bên trên Grid
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar" style="float:right">
<a class="btn btn-danger k-grid-add" href="#">
<i class="glyphicon glyphicon-plus"></i> Thêm mới
</a>
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
Nhập bằng Excel
</button>
<button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>
</div>
</text>);
})
The following line of HTML that you're adding
<button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>
...is basically whatever this line of code would generate:
toolbar.Excel().HtmlAttributes(new { #class = "btn btn-danger", style = "float: left" });
So just load the page once with the toolbar template commented out, see what HTML toolbar.Excel() generates and then copy and paste that inside the template.