MVC5 checkbox size (RESOLVED - kinda) - Web Development Discussion Boards

Assuming you haven't set up a CSP policy[^], have you got any add-ons that could be blocking scripts?

John Simmons / outlaw programmer wrote:
browserLink (wtf is that?)

Introducing Browser Link, a New Browser Productivity Tool for a Faster ASP.NET Development Cycle | Visual Studio 2013 Launch | Channel 9[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

No, I haven't set one because I wasn't aware that I need too.

By addons, do you mean nugget packages?

How would I be able to determine that?

(all of the above could also be asked like this - "How the f*ck should I know?")

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

No, I mean Chrome extensions. Check in chrome://extensions/[^], or "Menu ⇒ More tools ⇒ Extensions" to see what's installed.

You could try starting Chrome in "safe mode" to see if that fixes the issue.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Nope, I haven't installed any extensions, but ScriptSafe is installed.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

That's almost certainly the cause of the problem. AFAIK, Chrome script blockers inject a custom CSP to prevent scripts from executing, which matches the errors in the console.

If you click on the icon, there should be an option to trust or unblock your local site.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

I disabled scriptsafe, and now it works.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

Cross check ActionName , Controller Name and Methode type(POST/GET)

Spacially Forgery token on both side

I found out how to align the checkbox with the fields, and then how to vertically center the checkbox with the label, but nothing I've tried lets me make the checkbox 2x larger. I've tried various combinations of height, line-height, padding, and margin, but nothing seems to affect the size.

I don't want to modify the bootstrap files to do this. Can anyone help?

EDIT/UPDATE/RESOLUTION ==================================

I finally came to a somewhat reasonable resolution that appears to work in all browsers.

I have adapted all checkboxes to the following:

HTML

<div class="form-group">
    @Html.LabelFor(m => m.RememberMe, new {@class = "col-md-2 control-label", @style="color:transparent;"})
    <div class="col-md-10">
        <label class="btn btn-default">
            @Html.CheckBoxFor(m => m.RememberMe)&nbsp;&nbsp;Remember me&nbsp;&nbsp;
        </label>
    </div>
</div>

And in all actuality, I have an extension method that I use that reduces the above to the following

@Html.CheckBoxForEx(m => m.RememberMe)

The extension method has a labelText parameter that defaults to null, and if that parameter is null, it tries to get the display name for the specified expression. The method also does all the element wrapping and styling, so if I change that stuff in the method, the change is realized throughout the site with no further changes. I've created similar extension methods for most of the MVC Html.Helper methods. My entire Login form looks like this:

HTML

@Html.TextBoxForEx(m => m.Email);
@Html.PasswordForEx(m => m.Password)
@Html.CheckBoxForEx(m => m.RememberMe)
@Html.ActionInputButton("LogIn", "Log in")

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

modified 16-Nov-17 10:53am.

In Chrome, Edge and IE11, setting the width and height seems to work:
Edit fiddle - JSFiddle[^]

In Firefox, that makes the input occupy a larger area, but leaves the box the same size.

Earlier browser versions also have problems. The simplest option is probably to create a custom checkbox element, as described on MDN:
Advanced styling for HTML forms - Learn web development | MDN[^]

But that can get quite fiddly, between changing the image sizes and the padding and positioning of the sprite.

Another option would be to use the transform[^] property to scale the element up:
Edit fiddle - JSFiddle[^]

But that then causes it to overlap the surrounding content, so you'd have to add margins to push the siblings out of the way:
Edit fiddle - JSFiddle[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

I've already tried transform, and that didn't work either. Frown | :(

Something weird - I specified an EditorFor container with the bool field, and I got an editor box (for text) overlaid with a checkbox that was as tall as the editor box. When I changed it to a CheckBoxFor, it reverted back to its original too-small-for-my-taste size.

BTW, I'm using chrome in VS...

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

I found a way. I created a new stylesheet, added it to the end of the style bundle loader:

CSS

bundles.Add(new StyleBundle ("~/Content/css").Include("~/Content/bootstrap.css","~/Content/site.css","~/AppCode/StyleMods.css"));

and put this style into it:

CSS

input[type="checkbox"] 
{ 
    height: 26px;
    width: 26px;
    margin-top:-3px;
}

Of course, this applies to all checkboxes on the site, but that's what I want, so silver linings. Mo bettah buttah. Smile | :)

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

That doesn't work in Firefox - the input takes up more room, but the checkbox stays the same size.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

I can't try this until I get home (we don't/can't have FF here at work), but try adding this to the style:

moz-appearance:none;

(This is the biggest reason that I generally despise web development.)

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

That just makes the checkbox disappear completely! Laugh | :laugh:

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

I also found this link:

Advanced styling for HTML forms - Learn web development | MDN[^]

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

Now where[^] have I seen that link before? Big Grin | :-D

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Ya know, I'm really disappointed in Firefox. For years, it's been my default browser, and now I'm seriously considering changing over to something else...

Maybe Lynx...

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

I am supporting a web form .net application and I have found out that some of the JavaScript has been deprecated using Internet explorer by using the Internet explorer web developer tools. I have now used the Firefox browser and the application seems to work for what I have tested so far. 

Before I place the new version of the application into production, I would like to know what JavaScript features are currently obsolete and/or may be deprecated in the near future.


Due to that fact, would you tell me and/or point me to urls (links) that will tell me what JavaScript items are obsolete and/or deprecated using the Firefox browser?

There can be several answers to this question of yours, however you should consider reading the Can I Use website and trying out what API is supported in which of the browsers. Can I use... Support tables for HTML5, CSS3, etc. This website will tell you about all possible APIs, not just for Firefox but for other major browsers as well; so it can be helpful in many cases.

Secondly, you should consider using a framework that supports or at least tends to abstract the underlying browser and supports the features of JavaScript.

Thirdly, avoid supporting IE8 or less. You might want to look into Bootstrap for some UI related tasks, Bootstrap · The most popular HTML, CSS, and JS library in the world.

Lastly, why are you using Web Forms? I would recommend trying to migrate the production website to a modern framework. If not possible, then just try to maintain the websites instead of shipping features on top of the same old framework.

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

In addition to CanIUse, which is a great resource as suggested by Afzaal, the Mozilla Developer Network (MDN) maintains fantastic documentation including browser support for specific functions and objects. The bottom of pretty much every entry has a browser compatability matrix, and the references generally give great API descriptions and examples.

JavaScript | MDN

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Can anyone provide a code snippet or way to create a web page to hold a session and connect to Unix server and execute unix command and display output please?

That is more a complete project rather than a code snippet. You first need a website to display all the information and get input from the user. Then your webserver needs back end code to do the UNIX connection.

I'm trying to post some data from the view for processing in the controller, but I'm not having any luck.

In my controller, I have this method:

[HttpPost]
public ActionResult Create(string street, string city, string state, string zip)
{
    Geocoder geoCoder = new Geocoder(street, city, state, zip);
    ViewBag.GeoCodeMsg = string.Concat("Address confidence is ", geoCoder.Address.Location.Confidence);
    return View();
}

In my view, I have this:

HTML

<input type="submit" name="validateAddr" value="Verify Address" class="btn btn-default" 
onclick="location.href='@Url.Action("ValidateAddress","ICSProfile",new { street=Model.Street, 
city=Model.City, state=Model.StateProvince, zip=Model.Zipcode })'" /></li>

When I click the "Validate Address" button, it gives me a 404 error for ICSProfile/ValidateAddress.

My desire is to post the info back to the controller, work on the data, and then update the view based on the processing results. What am I missing?

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013

Assuming this action is on the ICSProfileController and you have default route mappings, the appropriate link is:

C#

<input type="submit" name="validateAddr" value="Verify Address" class="btn btn-default" 
onclick="location.href='@Url.Action("Create","ICSProfile",new { street=Model.Street, 
city=Model.City, state=Model.StateProvince, zip=Model.Zipcode })'" />

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

i have a listing page liststd view which displays all standards

when i click on any standard it redirects to section view

in section view i have a @url.Action to add new Section. A new gets opened but i need standard when the section view get opened so that when saving i can save both standard and section