I am using MVC 3 with jQuery mobile. The buttons on my phone browser are too small. I have tried different properties, but nothing seems to be working. Here is my code:
<div data-role="radio">
#HTML.RadioButtonFor(model => model.ButtonLabel)
</div>
Any ideas would be appreciated!
Thanks!
<div data-role="radio">
#HTML.RadioButtonFor(model => model.ButtonLabel,true, new { #style = "margin: 1em 1em 1em 0;transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-ms-transform: scale(1.1, 1.1);-webkit-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);"})
</div>
True is the value for radiobutton. Ofcourse there is going to be 2nd radiobutton which will be having false value.or another way is you can create class with above css and apply that class to radiobutton like #class="class_radio". scale increase size of you radio button.
Hope it helps
Related
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
I am trying to insert a kendo listview in each of the panels but it seems to mess up because my listview items have css float:left
I have simplified the problem to the following.. which does not show any items in the panelbar because the div has floating style
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{
panelbar.Add().Text("Images")
.Expanded(true)
.Content(#<text>
<div style="float:left;">one</div>
<div style="float:left;">two</div>
</text>);
panelbar.Add().Text("Movies")
.Expanded(true)
.Content(#<div>movies</div>);
panelbar.Add().Text("Images")
.Expanded(true)
.Content(#<div>flash</div>);
})
)
This is a very simplified version of what am trying to do which does not next a listview.
Thank you
(Old question, but just to help the next person searching for this).
Add this to the bottom of your Content block containing the floated divs.
<div style="clear: both;"></div>
I want to create a button which when clicked calls an action. I have used Html.ActionLink to create a link which does exactly that but there is no Html.ActionButton. Is there some other way?
Here is an example using Bootstrap's CSS button and applying it against the link to make it look exactly like the button.
#Html.ActionLink("Select", "Select", new { id = patient.Id }, new { #class = "btn btn-primary", #style = "color:white" })
Is there some other way?
You could use a html <form>:
#using (Html.BeginForm("someAction", "someController"))
{
<button type="submit">OK</button>
}
This seems very simple - am I missing something?
#Html.ActionLink("About", "About","Home", new { #class = "btn btn-success" })
Use this:
#using (Html.BeginForm("yourAction", "yourController"))
{
<input type="submit" value="Some text"/>
}
#using (Html.BeginForm("ActionName", "ControllerName")){
<input type="button" value="Submit" />
}
a[type="button"] {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
text-decoration: none;
}
#Html.ActionLink("ActionName", "ControllerName",null, new {type = "button" })
Sometimes your button might have nested markup (e.g. for an icon)
This might be helpful to some people:
<button type="button" onclick="location.href='#Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>
type=button is required to prevent page from submitting... Another possible solution (if you think type=button looks weird because the element is already a button) would be to call event.preventDefault() in the OnClick javascript handler.
<button onclick="event.preventDefault(); location.href='#Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>
This should answer your question.
Can I use an asp:Button like an Html.ActionLink?
Uses CSS to make the link look like a button.
Or use the button inside the form with the form controls moving the page along.
You can write a link to controller and view this way / skip the whole razor notation (worked for me recently on my localhost!):
<button type="submit">OK</button>
use FORMACTION
<input type="submit" value="Delete" id="delete" formaction="#Url.Action("Delete", new { id = Model.Id })" />
I know this is an old topic, but this helped me:
#Html.ActionLink("New member", "Create", null, new {#class = "btn btn-default"})
Make sure you use the correct overload or else you will be directed to the wrong controller.
you need to use a "null" before the new {} as shown below:
#Html.ActionLink("About", "Action Name","Controller Name",null, new { #class = "btn btn-success" })
Notice the null above. This is important!!!
For those of you trying to make an anchor tag look like a button in Bootstrap v3 (maybe v4, too), beware that there are some subtle styling differences regarding margin that bootstrap targets to the Input element and not the A element. This can be a little frustrating when trying to put several buttons next to each other.
There's a rather obvious reason why MVC doesn't have a ButtonLink helper: Think about it. Buttons do not link to anything. They run code. So what code would the helper render? I mean it seems simple that it could just render something like onclick="window.location=/controller/method..." but, is that really what you want? Is it what everyone always wants? Isn't that really just doing a GET? It gets kind of goofy.
So, really, if you want a button that opens a link the easiest way is to do what everyone else suggested and style an A tag to look like a button but then probably go into your stylesheet and do a very specific target of your button anchors to get the same styling as actual buttons. Or use an Input tag and force Razor (or whatever) to render the link inline with your JavaScript.
I am having a button which point to a actionlink that I render with jqueryui button, all I want is the rendering visual of the button, and keeping its normal behavior, on Chrome fine, the button points to the actionlink, but on Firefox 11, when I click the button, nothing happens.
This is the code on the view:
<button id="btnNewOffer" style="float: left; margin-left: 30px"> #Html.ActionLink("Offre", "Index", "Service") </button>
This is the script:
<script type="text/javascript">
$(function () {
$("#btnNewOffer").button();
})
</script>
This is working on Chrome but non Firefox 11
Thanks
I don't think you need to use the <button /> element. You can simply use the ActionLink by itself.
Try this:
#Html.ActionLink("Offre", "Index", "Service", htmlAttributes: new { id = "btnNewOffer", style = "float: left; margin-left: 30px" })
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.