ASP.NET + bootstrap styles not working - asp.net

I've just started working with Bootstrap.
I need a form like this: https://i.stack.imgur.com/PVPEy.png
Here's my page code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/bundles/styles")
<title>Webstite Evaluation Tool</title>
</head>
<body>
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
Bundles:
bundles.Add(new StyleBundle("~/bundles/styles").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/bootstrap-theme.css",
"~/Content/bars.css"
));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-3.1.1.js"
));
All I have in result is this: https://i.stack.imgur.com/BNXXu.png
What should I do to fix this? It seems not all styles loaded, but in the source code I see everything from bundles.

Have a look at button addons in the Bootstrap Docs. e.g.
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-3 -->
</div><!-- /.row -->
Example at Bootply

Related

Recpatcha not rendering until refresh page in Angular js

Recaptcha not rendering until I refresh the page
I'm using Recaptcha in my angular js project for security stuff.
I just implemented the captcha with following below steps:
1. I added below link to my page (in the head tag before every styles and scripts file):
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
2. In my form, I added captcha
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
so my page is something like this
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Apparently, everything is fine, but Recaptcha not rendering until I refresh the page. actually, it's not gonna work when the page request by ajax but after page reloading, Recaptcha will render on the page!
So how can I render Recaptcha with the first render??
I figure out how can I fix this problem.
instead of adding this script
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
to layout page, I added it in every page that I want to render captcha so after routing to the special page, in addition, to render the page content captcha will render for us too.
for exmaple the content page template will be something like this:
contactus.html content
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async></script>
<form name="contactUsForm" novalidate>
<section class="well">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group has-feedback" ng-class="{'has-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'has-success': !contactUsForm.firstName.$error.required }">
<label class="control-label col-sm-4" for="firstName">Name</label>
<div class="col-sm-8 col-md-6">
<input type="text" id="firstName" name="firstName" ng-model="contactUs.firstName" class="form-control" ng-class="{'form-control-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'form-control-success': !contactUsForm.firstName.$error.required }" placeholder="Name" required />
<span ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="!contactUsForm.firstName.$error.required" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<div class="text-danger" ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty">Name is required</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-12 col-sm-offset-2" style="display: flex;justify-content: flex-start;margin-bottom: 2rem;">
<div class="g-recaptcha" data-sitekey="my-sitekey"></div> <!-- Server -->
<!--<div class="g-recaptcha" data-sitekey="my-sitekey"></div>--> <!-- Local -->
</div>
<div class="buttons-wrap col-sm-offset-2" style="text-align:right;padding-right:1.6rem">
<button class="btn btn-primary" ng-disabled="contactUsForm.$invalid" data-toggle="modal" data-target="#confirmModal"><i class="glyphicon glyphicon-save"></i><span>&submit</span></button>
</div>
</section>
</form>

HTML5 control validation disappears

I have created a bootstrap form and using the 'required' parameter on a control to use html5 validation when I click the submit button.
When I do click the submit button the validation bubble appears for a second and disappears. I am not sure why it is doing this. I am using runat="server" on the controls as I need to access them from the codebehind page.
I have tried several options but still nothing.
A trimmed down version of the page below:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Client Details</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell the browser to be responsive to screen width -->
<link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../StyleSheets/theme.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../Stylesheets/iCheck.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Google Font -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="Main" runat="server" runat="server" >
<section class="content">
<p class ="text-left" style="padding-top:50px">
<h2><label id="lblFormName">Create Client</label></h2>
</p>
<p class="text-right">
<button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
<button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
</p>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Client Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Client ID</label>
<input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
</div>
<div class="form-group">
<label>Client Name</label>
<input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title</label>
<select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>
</div>
<div class="form-group">
<label>Client Surname</label>
<input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
</div>
</div>
</div>
<div class="col-md-6"><!--Left Column-->
<div class="form-group">
<label>Client Type</label>
<select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6"><!--Right Column-->
<div class="form-group">
<label>Client Status</label>
<select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
</div><!-- /.form-group -->
</div>
</div><!-- /.Panel-body -->
</div>
</div>
</div>
</form>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
I will add an answer and mark the question as a duplicate just to provide a reference for this issue if somebody else looks it up.
Updating the browser to the latest version should fix the issue. Here is the the original question link:
Related question with info on the bug fix for this issue

Bootstrap 3.2 won't style Spring MVC form:form

I have a simple Spring MVC 4.x (tiles) scenario. Where in response to a URI a form is displayed, however, Bootstrap styling is not kicking in:
JSP:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<br/><br/><br/>
<form:form modelAttribute="car" method="post">
<div class="form-group">
<label for="title">Make</label>
<form:input path="make"/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<form:input path="model"/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<form:input path="color"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form:form>
Rendered HTML:
<body>
<div class="container">
<div class="row">
<div class="header">
</div>
<div id="main-content-container">
<!-- main body -->
<br/><br/><br/>
<form id="car" action="/libms/carsx" method="post">
<div class="form-group">
<label for="title">Make</label>
<input id="make" name="make" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<input id="model" name="model" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<input id="color" name="color" type="text" value=""/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
Looks like this on screen:
I have verified if Spring's form:form is removed and <form> is used instead, the styling kicks in.
You need to include jquery and bootstrap on your page. For example:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
You may also want to make of use some other bootstrap elements such as cssClass.
For example:
<form:form modelAttribute="car" method="post">
...can be changed to:
<form:form modelAttribute="car" cssClass="form-horizontal" method="post">
And:
<label for="title">Make</label>
...can be changed to:
<label for="title" class="col-sm-2 control-label">Make</label>
And:
<form:input path="make"/>
...can be changed to:
<div class="col-sm-2">
<form:input path="make" cssClass="form-control"/>
</div>
As you mention, the Spring form functionality also kicks in since you're including the Spring form taglib as well.
Have you Included Bootstrap in your jsp page Like
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>Products</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Products</h1>
<p>Add products</p>
</div>
</div>
....
I can't see it in your page

steroids ionic form goes below header bar

I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.

Bootstrap 3.2.0 Glyphicons not working

I'm new to bootstrap & its glyphicons are not working for me. After I've inspect the code, font-family of glyphicon-user was "Helvetica Neue",​Helvetica,​Arial,​sans-serif & not Glyphicons Halflings. Am I missing something or do i need to change the css file.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
</body>
</html>
You need to add the class glyphicon.
So your span should actually be:
<span class="glyphicon glyphicon-user"></span>
As shown in the documentation: http://getbootstrap.com/components/#glyphicons-how-to-use
It's not enough to name the glyph, you have to use the class glyphicon too.
<span class="glyphicon glyphicon-user"></span>
Also, beware if you are using this in Opera mobile emulator. It doesn't support these fonts properly so you'll get a blank square.
Follow the steps to work Glyphicons icons in your boostrap project:
add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample
<span class="glyphicon glyphicon-user"></span>
Thanks!

Resources