I am debugging my simple Grails application, the CSS effects sometimes miss when I refresh the page. however,
view source shows correct html, but browser just shows the plain page.
If I stop grails and re-run, the CSS comes back. I guess it's something related to cache, but I really cannot figure out what's wrong. below is the source
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
</div>
<div class="row-fluid offset7">
<div class="well span3">
<form action="/dashboard/login/login" method="post" >
<fieldset>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="account">Account</label>
<div class="controls">
<input type="text" name="accountName" placeholder="account" class="input-xlarge" value="" id="accountName" />
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" name="password" placeholder="password" class="input-xlarge" value="" id="password" />
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<input type="submit" name="Login" value="Login" class="btn btn-success" id="Login" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
I don't know how is your .gsp code, but i passed for a problem similar with your.
I solve my problem updating the resource plugins version, like you can see in the post above:
Grails: Images / CSS missing from time to time
Related
I'm using bootstrap for the design of my form, but it's not showing the back-ground color of the form, like it's in the examples.
All the fonts colors sizes & designs of the bootstrap are applied, but the background of my form is missing.
I also copy and pasted all the code from the example to see if it will show the form background, but even then it didn't show the background-color of the bootstrap theme.
I have included bootstrap.css and bootstrap.min.css in my html file.
This is the theme that I am using: https://bootswatch.com/flatly/
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
try it like this
<head>
<meta charset="utf-8">
<title>Users</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- my style sheet -->
<link rel="stylesheet" href="style.css">
</head>
There is a missing code before the fiedset tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<div class="row">
<div class="col-bs-6">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
</body>
</html>
I am trying to style a contact form I set up on my website. I took a ready made one (html with css styling and php action) but when I put it in my html, it doesn't link the html with the css. How should I define the divs? Thank you.
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
Have you included the css reference to your page header? As in
<link rel="stylesheet" href="css/form-style.css" type="text/css">
There should be a css file for the given html form in that website. You should connect that form.css file to the form.html post by mentioning the following code in the head section of your html. Check it and see
<html>
<head>
<link rel="stylesheet" href="css/form.css" type="text/css">
</head>
<body>
<div id="contact" class="contact">
<div class="row"><div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div></div>
</body>
</html>
I have included the css reference, the rest of my page styling is working, that isn't. The weird part is, I took that from a website I had previously worked on, and it worked there perfectly.
<link rel="stylesheet" href="assets/style.css" type="text/css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form Style</title>
<link type="text/css" rel="stylesheet" href="css/form.css"/> //css/form.css - select your file location
/* OR */
<style type="text/css">
/*Paste your css style code here*/
</style>
</head>
<body>
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form name="mail" action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps...
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I used tables for my layout but I must use DIVs instead because I have forms in my tables. It was a mistake rendering the code with tables because it has forms and the form functionality is experiencing unwanted sideeffects from using tables so I must use DIVs instead for the layout. Can you help me how I achieve my layout with no tables?
Here's a fiddle with my code. The html is
<body>
<div id="wrapper">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">LOG IN</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Login" type="submit"></div> <div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">CREATE ACCOUNT</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Create Account" type="submit"></div>
<div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
<div class="div-table-row">
<div class="div-table-col">OR LOG IN WITH</div>
<div class="div-table-col"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div> <div class="div-table-col"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="div-table-col"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div> <div class="div-table-col"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
</div>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
After a while I tried it with bootstrap which didn't work at all:
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-1"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-1"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-1"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-1"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Login" type="submit"></div>
</div>
<div class="row">
<div class="col-md-1">.col-md-4</div>
<div class="col-md-2 logintext">YOUR E-MAIL</div>
<div class="col-md-2 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Create Account" type="submit"></div>
</div>
</form>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
Edit
The way I finally did it was with twitter bootstrap and I'm happy with it. But rearranging everything into DIVs didn't solve the problem of autocomplete with the form so I had to resort to a dirty trick to clear the form for the create field. Strange thing was that I had to restart everything to make twitter bootstrap work.
<div id="mybox">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-2"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-2"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-2"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-2"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-3">
<input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-3">
<input name="password" size="35" title="password" type="password">
</div>
<div class="col-md-2">
<input value="Login" type="submit">
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3 logintext">YOUR E-MAIL</div>
<div class="col-md-3 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<input style="display:none">
<input type="password" style="display:none">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-3">
<input name="email" id="email" size="35" autocomplete="off" title="email" type="text" value="">
</div>
<div class="col-md-3">
<input name="password" id="password" size="35" autocomplete="off" title="password" type="password" value="">
</div>
<div class="col-md-2">
<input value="Create Account" type="submit">
</div>
</div>
</form>
</table>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
As you may be discovering, tables should not be used for layout. As a matter of fact, they should only be used for displaying data.
As far as building a layout with divs, here's what you need to know to get started.
Use width, max-width, and min-width to your advantage to create intuitive and responsive layouts.
Use percent, em, and vh in place of pixels where you can.
Consider learning and using floats, and clear: both to help with responsive layout.
Also, consider using the twitter bootstrap CSS framework. Specifically the grid functionality. You can learn it and use it in minutes.
I hope this helps.
This layout is ridiculously simple, and you're making it far more complex than it needs to be. I stripped out all the google ad stuff, which you can add back, but there is way more markup here than you need and way more junk.
Here's a quick fiddle I threw together in about 10 minutes that gives you the basic layout. I'm sure you can tweak it to the exact dimensions you need.
http://jsfiddle.net/fop9vLjh/1/
<style type="text/css">
body { font-family: sans-serif; }
#wrapper { width: 900px; margin: 0 auto; }
div { margin-top: 15px; }
#login-box { background-color: #ffc801; padding: 10px; }
span { float: left; width: 10em; }
#recover { float: right; }
a { text-decoration: none; }
input[type='text'],input[type='password'] { width: 18em; }
.form-field { width: 15em; display: inline-block; vertical-align: top; margin-top: 0; }
label { display: block; font-size: small; }
</style>
<div id="wrapper">
<div id="login-box">
<div id="login">
<span>LOGIN</span>
<form action="/account/do_login" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">PASSWORD</label>
</div>
<button type="submit" value="Login">Login</button>
</form>
</div>
<div id="create">
<span>CREATE ACCOUNT</span>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">DESIRED PASSWORD</label>
</div>
<button type="submit" value="Create">Create Account</button>
</form>
</div>
<div id="alt-login">
<span>OR LOG IN WITH</span>
<input name="google" type="image" src="#"/>
<input name="linkedin" type="image" src="#"/>
<input name="yahoo" type="image" src="#"/>
<input name="facebook" type="image" src="#"/>
</div>
</div>
<div id="recover">
CLICK HERE TO RECOVER YOUR ACCOUNT
</div>
</div>
Excuse me but its html\css basics. Where exactly your problem is? I only see the problem with top yellow bar which can be fixed by something like this:
html {
position:absolute;
min-width:100%;
}
But still it looks ugly enough (:
My two column layout is stacking on top of each other instead of sitting side by side.
Can anyone help me out?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
</div>
<div class="row-fluid">
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
You have a bunch of unnecessary divs:
<body>
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</body>
Basically, anything that should be in a row needs to be within the same row or row-fluid container. This is covered in the documentation: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
I'd like to make a bootstrap form that looks good on web and mobile. It seems like the straightforward markup doesn't work well. It's an angular app, but I don't think angular figures in...
One problem is if I try to contain several fields by a div in order to apply a background color, the fields aren't contained, spilling off the left side of the div.
Another problem, related I think, is that the fields appear on mobile with 0px left and right margins, which doesn't look too good.
Here's the markup:
in index .html:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
That angular view directive causes the form to be included as follows...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
And here's the bad result: see how fields spill off to the left?
On Web....
About what it looks like on mobile...
Try removing the <div class="row"> tags wrapped around your <div class="form-group"> tags. Both classes have negative left and right margins, which are being combined by the nested tags.
Example here.
Add a
<div class="col-md-12">
After your
<div class="row">
in the div containing the background-color:red;.
For example:
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
</div>
Compare your code with the correct code of bootstrap documentation
http://getbootstrap.com/css/#forms