I already finished the tutorial but I'm having a slight issue with the CSS rendering since section 7 where you make the signup form. This is what I'm getting:
And this is what it's supposed to look like:
And this is the relevant CSS:
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
height: auto;
margin-bottom: 15px;
#include box_sizing;
}
Was wondering if anyone else had the same issue?
The difference is probably with the default height of an input in Chrome vs FireFox (Hartl's browser).
The CSS declaration height:auto; lets the browser calculate the default height.
I had the same issue with Chrome, and although I don't know if it's a good solution, I got the expected results by getting rid of the #include box_sizing; comment:
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
height: auto;
margin-bottom: 15px;
// #include box_sizing;
}
Based upon the Handy Sass Mixins by Jake Bresnehan at http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins and the section on Box Sizing, I was able to change the mixin block and the "include" line and get things working with the following situations:
#mixin box_sizing {
-moz-box-sizing: $box-model;
-webkit-box-sizing: $box-model;
box-sizing: $box-model;
}
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing(border-box);
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing(border-box);
}
input {
height: auto !important;
}
which is also referencing the Michael Hartl, Ruby on Rails Tutorial, Ch. 7 at http://ruby.railstutorial.org/chapters/sign-up#top
Related
I am trying to format an html page as a court pleading which needs to print neatly on an 8.5 x 11 piece of paper. I have it looking to spec as an HTML, but when I go to print, the Container holding the contents expands beyond the body.
I have tried setting a specific width to the container to match the body, but that has not worked.
I created a fiddle with both the HTML and CSS:
See fiddle here
Here is the CSS for the BODY and CONTAINER:
body {
width: 8.5in;
height: 11in;
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 8.5in;
margin: 0;
padding: 5px;
height: 100%;
}
If you click on the "Open print preview" text at the bottom of the result, and then attempt to print, you can see how the document changes in the print preview window in Chrome.
This application is meant to work in Chrome specifically. I am trying to produce a document that looks similar to the following, with the grey thinner lines indicating the edge of the page:
I'm not sure this is the solution which you are looking for. I tested your code in different browser's print preview functionality and found different result. Then I stick with google chrome and coded accordingly.
I found you used same code twice so it was not working properly! I put the other code for screen only. and change the following code for print
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 100%;
margin: 0;
padding: 5px;
height: 100%;
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
padding-left: 1.5in;
padding-right: .5in;
}
}
In my code I removed the textarea, instead I put a <p> tag with editable capability. Please review the code and let me know your opinion.
And this is what I have here in Google Chrome.
I tried several option but not found any proper one! But this one is tricky! Just used the following code for print CSS. Please replace and test this code.
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 6.5in;
margin: 0 auto;
padding: 10pt 36pt;
/* height: 100%; */
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
}
}
After that I used the custom margin in google chrome (Though I have not printed it! So you better test it for final output).
Hopefully this will satisfy your need! :)
I'm not quite sure what I'm doing wrong here.
I'm trying to apply a ribbon across a container using the example on this site:
http://www.andreapinchi.it/css3-ribbon-effect/
I've created a mock-up of the problem here:
http://jsbin.com/rebexatijizi/1/edit
Doesn't look much like the other. :(
*NOTE: JSBIN link updated above to show current status.
DEMO: http://jsbin.com/tibaqenawena/4/edit
CSS:
.ribbon, .ribbon:before, .ribbon:after {box-sizing:content-box;}
You can also just adjust the math in your css to include padding and borders. DEMO: http://jsbin.com/dupac/1/edit
div.both_ribbon::before{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
left: -2px;
content: "";
border-bottom: 10px solid transparent;
border-right: 10px solid rgb(0, 80, 116);
}
div.both_ribbon::after{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
right: -2px;
content: "";
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(0, 80, 116);
}
Also, your css is messed up and it still is, you have a enclosed a style within another style.
Your box-sizing properties seem to be messing everything up. In bootstrap.css remove the box-sizing rules. Also, take the padding off of your container (you can add another child element within your container that has padding instead). Here is the code you should remove:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I have a problem with padding in HTML5. I'm using this code:
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;}
I use inputs in div, which has padding 10px.
And when I'm testing code the width of input is not right, look at this pic:
How to solve this problem? I want to have padding 10px in any window size.
Add this CSS :
input {
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
This property will include padding and border to the width/height of inputs so they won't overflow anymore.
Use:
box-sizing:border-box;
-moz-box-sizing:border-box;
in your css file.
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
http://fiddle.jshell.net/yTM9U/2/
You need to set the CSS style margin-right for the input.
input {
margin-right: 10px;
}
Padding is a cushioning/space inside the element. To push an element away from
surrounding elements internal cushioning/padding-space cannot help. Margin needs
to be set for those purposes...
But in your case, r/l to the form width, inputs are already very wide (100%). So, you need to decrease the width of the inputs. Try
input {
width: 90%;
max-width: 90%;
}
Hey I am trying to learn rails and following the rails tutorial. I am adding some elements to the apps style sheets using SCSS and this is what I am adding
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
}
but when I go to view my it in a browser I receive this error
Mixin box-sizing is missing argument $boxmodel.
(in /Users/<mynamehere>/workspace/sample_app/app/assets/stylesheets/custom.css.scss:110)
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
Rails.root: /Users/<mynamehere>/workspace/sample_app
Any help would be much appreciated. Here is a link to my github if you need to see anything else
The error says, you need a argument for box_sizing.
So try #include box-sizing(border-box);.
I made the same mistake. Check again Listing 7.2, there's some extra code there before the "/* Miscellaneous */" part, where you declare what box_sizing is:
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Make sure you're declaring the mixin after the bootstrap & bootstrap-sprockets imports (i.e. ensure you're not declaring box_sizing before #import "bootstrap"). Bootstrap sass has a built-in box_sizing mixin that will take precedence over yours otherwise.
This isn't really covered in railsguide (there's no indicator that #import bootstrap introduces a conflicting mixin), so it's definitely an easy-to-make mistake.
I had the same issue with the same error message, and neither existing solution worked for me. In my case, I'd created an scss file for mixins and variables, and was importing it before bootstrap and bootstrap-sprockets. Moving it below them fixed the problem. So in your case, make sure your general order is:
#import "bootstrap-sprockets"
#import "bootstrap";
/* either #import your-file-containing-box-sizing-mixin; or: */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
I had the same problem, after finishing working on the custom.scss in Listing 7.2 I updated custom.scss by adding the css sidebar code of Listing 7.11 and the forms css code of Listing 7.15 on top of the Sass mixin css code of Listing 7.2. So it looked like this.
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* mixins, variables, etc. */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box-sizing(border-box);
}
To Fix it I brought the Sass mixin css code of Listing 7.2 back to the top below the `#import "bootstrap-sprockets";
#import "bootstrap"; but to be above the the css code of Listing 7.11 and Listing 7.15. This fixed the problem for me, here is the top of the custom.scss when I finished.
#import "bootstrap-sprockets";
#import "bootstrap";
/* mixins, variables, etc. */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box-sizing(border-box);
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
I've uploaded this question a while ago but it ended up giving me the tumbleweed badge so I'm trying again.
I'm going through Michael Hartl's railstutorial right now and I've encountered a problem where box-sizing property is interfering with form heights as shown in pictures below.
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
height: auto;
margin-bottom: 15px;
#include box_sizing; <--- this line here is causing issues
}
(box-sizing property in effect)
(box-sizing property not in effect)
Notice how much smaller forms are when box-sizing property is in effect? You can't really view full letters because the height is so low. I've tried to change the height property under input, textarea, ..etc. but it seems like my code is being overridden by Bootstrap. If you have any idea how to make the forms bigger (greater height) I would really appreciate it.
box-sizing: border-box changes the box model so padding is taken out from the height, rather than adding to it.
So this block:
div {
box-sizing: content-box; // default
height: 2em;
padding: .25em;
}
Will be 2.5em tall, and this block:
div {
box-sizing: border-box;
height: 2em;
padding: .25em;
}
will be 2em tall, with .5em of spacing partitioned for the padding.
The other issue is how bootstrap defines the height of inputs:
input[type="text"], ...other selectors..,
.uneditable-input {
display: inline-block;
height: 20px;
...
}
The reason defining a height wasn't working, is because input[type="text"] is more specific than input, and therefore the bootstrap declaration was overriding yours.
To solve the problem you are having with the inputs, define a height and use a more specific selector:
input[type="text"], textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
height: 2em;
margin-bottom: 15px;
#include box_sizing;
}
Demo