Although I tried the code below, these contents are arranged in tandem like this;
side1
.
.
.
contents from yield
.
.
.
side2
How can I display like this?
side1... contents from yield... side2
On the other hand, class="table table-striped" works, for example.
I have been tried to modify the source created by others.
It would be appreciated if you could give me where I should check.
application.html.erb
<div class="container">
<div class="row">
<div class="col-sm-3">side1</div>
<div class="col-sm-6">
<div><%= notice %></div>
<div><%= alert %></div>
<%= yield %>
</div>
<div class="col-sm-3">side2</div>
</div>
</div>
Although I tried col-xs, I found the same result.
custom.css.scss
#import "bootstrap";
Gemfile
gem 'bootstrap-sass', '2.3.2.0'
application.css
*= require_tree .
*= require_self
Can you check if custom.css.scss has been added to application.css.scss and that application.css is loaded in the layout page?
EDIT:
According to this for the bootstrap version: bootstrap docs, perhaps you should use <div class="span4"></div> syntax.
Related
I am newbie with Rails and here is my problem
I created a rails program by this command
rails new freelancer -d=postgresql --javascript=webpack
And I had no problem
I wanted to use bulma extension in my rails program and I added these line to the gemfile
gem 'bulma-rails', '~> 0.9.4'
gem 'bulma-extensions-rails', '~> 1.0.30'
and these lines to the app -> assets -> stylesheets -> application.css
#import 'bulma';
#import 'bulma-extensions';
then I ran these commands
bundle install;
yarn add jquery;
and I had no error.
I created a rails page by this command
rails g controller pages home
and add the bulma code to the app -> views -> layouts -> application.html.erb file
Here is my application.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>Freelancer</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<%= yield %>
</body>
</html>
I thought that my home page must be the design as here
https://bulma.io/documentation/components/navbar/
, but it liked this
my problem
I did not know why it became like this ? Could you please give me some advice for my problem ? Here is my code, if you need for reference
https://github.com/nguyencuc2586/freelancer01
Thank you in advance!
I cloned your repo locally and it seems that you're using SASS directives while the app is configured for CSS only.
I fixed the issue by replacing application.css content with:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require bulma
*= require bulma-extensions
*/
Here is the result:
I've spent some time on trying to add function of uploading, posting and displaying images in my application. I've tried different methods, eventually finding out that 'Trix' is what I need to reach that goal.
The issue here is that my application structure is quite different from those that I see in 'trix' tutorials, and I have no idea what I am doing :(((
Let's start from the fact that my application.js is located in ->
[app]>
-[javascript]
-[packs]
-application.js
and looks very different from what I see in tutorials. However, I tried to adapt like so -
...
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('trix')
...
Instead of writing //= require trix.
Another slight difference is that my "application.css" is not ".scss", but I figured it is not that big of a deal. So I went ahead and pasted *= require trix in there.
At first , when I loaded page I've got an error couldn't find file 'trix' with type 'text/css' , but after restarting server it wasn't there anymore (which is normal). Next step would be adding the code ... but it seems that most people have _form.html.erb. And here is where I need help. my "Post" structure is like this ->
[views]>
- edit.html.erb
- index.html.erb
- new.html.erb
- show.html.erb
where new.html.erb contains the form for submitting a post ->
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">Create a new post</h1>
<%= form_tag("/posts/create") do %>
<div class="form">
<div class="form-body">
<% #post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= #post.content %></textarea>
<input type="submit" value="Post">
</div>
</div>
<% end %>
</div>
</div>
This is where the difference really confuses me... Where do I add 'trix' ? I've tried replacing textarea with trix-editor, the only changes I've got , where two small overlapping squares instead of submit form.
Help. :(
When running my Rails (Blog) app, I can't get my banner image to display.
My files are as follows (the page show without error just no image):
application.js
//* require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .
application.scss
#import "bootstrap";
#import "navbar";
_post.html.erb
<div class='col-sm-6 col-lg-4'>
<div class="card">
<div class="card-topper" style='background-image:
url(https://static.pexels.com/photos/113762/pexels-photo-113762-
large.jpeg);'>
</div>
<div class="card-block">
<h4 class="card-title"><%= link_to post.title, post %></h4>
<p class="published-date">published Jan 14, 2016</p>
<p class="card-text"><%= truncate(post.description, lenght: 130)
%></p>
<%= link_to 'Read', post, class: 'btn btn-read' %>
</div>
</div>
</div>
The issue is not related to rails. The image background will appear once you have content in your DIV. if you don't have content inside the DIV, better use <img /> tag.
Reference:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
Image tag:
https://www.w3schools.com/html/html_images.asp
I'm looking for an example that use progres bar of twitter bootstrap in Rails App.
I'm new in web developer ror and I don't know do it.
I can use other progress bar, but in Rails APp...
Try using a gem that adds bootstrap to your asset pipeline, that will make your life easier like this one: https://github.com/thomas-mcdonald/bootstrap-sass
once you add the gem import the JS and Css to your asset pipeline like this:
create a css.scss file. in you assets>stylesheets folder
boot.css.scss:
$navbarBackground: #000;
$navbarText: #fff;
$navbarLinkColor: #888;
$navbarBrandColor: #FFF;
#import "bootstrap";
#import "bootstrap-responsive";
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
after the gem is in your pipeline restart the app and you can add the progressbar like this:
<div class="span8 progress progress-striped active"><div id="bar" class="bar" style="width: 100%;"></div></div>
There exists a gem ;-)
https://github.com/yrgoldteeth/css3-progress-bar-rails
For animating the progress bar you have to use javaScript
I included this in the index.html.erb. It will put a progress bar based on the value in a database field using Twitter Bootstrap, and also show the % progress
<tbody>
<% #active_xfers.each do |active_xfer| %>
<tr>
<td><%= active_xfer.name %></td>
<td><%= active_xfer.status %></td>
<td><div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<%= active_xfer.progress %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= active_xfer.progress %>;">
<%= active_xfer.progress %>
</div>
</div></td>
<td><%= active_xfer.started %></td>
<td><%= active_xfer.finished %></td>
</tr>
<% end %>
</tbody>
I don't understand why my charges stylesheet is not being picked up appropriately.
Any styling I do in charges.css.scss do not affect my view in any way.
application.css
*
*= require jquery.ui.datepicker
*= require_self
*= require bootstrap
*= require front
*= require lists
*= require tasks
*= require lightbox
*/
charges.css.scss
// Place all the styles related to the charges controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.row_form {
background-color: red;
}
new.html.erb
<div class="container row_form" style="width:990px;">
<div class="row">
<div class="span1 offset3">
<h2></h2>
<%= render '/charges/new' %>
</div>
</div>
</div>
Where _new is a popout payment form using stripe.js
Only inline styling is working and it doesn't pick up any bootsstrap classes either. What am I not understanding here? Also, I tried including *= require_tree . and *= require charges in the manifest to no avail.
UPDATED WITH HTML SOURCE
<html>
<head>
</head>
<body>
<div class="container row_form" style="width:990px;">
<div class="row">
<div class="span1 offset3">
<h2></h2>
<form accept-charset="UTF-8" action="/charges" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="dvlHeyYvCVfMox/UilOaNoPmT+eO3Z7PuMgE3kXpDPU=" /></div>
<article>
<label class="amount">
<span>Amount: $number</span>
</label>
</article>
<script src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_test_3ZFJmvwy4tgn2XUPwUsL7mZQ"
data-description="Continued Full User Acess"
data-amount="integer">
</script>
</form>
</div>
</div>
</div>
</body>
check the followings
does you app runs on development mode ?
try rake assets:clean and re-start the sever
check your style sheet is updated (via the source of the html page)
hope one of this should get you going :)