I am using bootstrap buttons in my code. I would like to change certain buttons in a particular div however. The should be smaller
<div class="well">
<div class="bookmark">
<% #bookmarks.each do |bookmark| %>
<p>
<%= link_to bookmark.url %>
#these should be smaller
<%= link_to "Edit bookmark", edit_topic_bookmark_path(#topic, bookmark), class: "btn btn-danger" %>
<%= link_to "Destroy bookmark", [#topic, bookmark], method: :delete, class: "btn btn-danger" %>
</p>
<%= render partial: 'favorites/favorite', locals: { favorite: #favorite, bookmark: #bookmark } %>
<% end %>
</div>
<%= link_to "New bookmark", new_topic_bookmark_path(#topic), class: 'btn btn-default' %>
</div>
I was trying do this adding this to my application.css.scss file
.bookmarks btn {
size: 2px;
}
But this does not seem to work. Any suggestions?
try this:
<p>
<%= link_to bookmark.url %>
#these should be smaller
<%= link_to "Edit bookmark", edit_topic_bookmark_path(#topic, bookmark), class: "btn btn-danger btn-sm" %>
<%= link_to "Destroy bookmark", [#topic, bookmark], method: :delete, class: "btn btn-danger btn-sm" %>
</p>
You could these classes for sizing buttons:
btn-lg
btn-sm
btn-xs
bootstrap documentation
Did you try the bootstrap button size classes?
You custom css for the button could be something like.
.custom-button {
font-size:0.8em;
padding:5px;
}
Where you lower the padding and font size to reduce the size.
I think the quick way is make it important
.bookmarks btn {
size: 2px!important;
}
Related
This is annoying because I feel like I have tried everything. My goal is to have a red ring around invalid input fields when the input is invalid. How do I target invalid input fields in rails 6. I am using a rails form which is generated by devise. I am also using tailwind css.
I have tried all of the following.
.invalid{
#apply ring-2 ring-red-700
}
.input:invalid{
#apply ring-2 ring-red-700
}
.input-group {
.invalid {
#apply ring-2 ring-red-700
}
}
Here is the form I am using to register users
<% content_for :devise_form do %>
<%= form_for(resource, as: resource_name, url: session_path(resource_name), :html => {:class => 'form-horizontal' }) do |f| %>
<div class="input-group">
<%= f.label :email %><br />
<%= f.email_field :email,
autofocus: true,
autocomplete: "email",
class: "input",
placeholder: "Your Email"%>
</div>
<div class="input-group">
<%= f.label :password %><br />
<%= f.password_field :password,
autocomplete: "current-password",
class: "input"%>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="input-group">
<%= f.submit "Log in", class: "btn btn-default loader" %>
</div>
<% end %>
<hr class="mt-6 border" />
<%= render "devise/shared/links" %>
<% end %>
<%= render "devise/shared/form_wrapper" %>
So how do I target fields whose input's are invalid?
I ended up using the developer tools in the browser. I inspected the element which is called input#user_password.invalid. So the long term solution is to use inspect elements.
#layer components {
.field_with_errors { #apply border-2 border-red-700}
}
I have a simple form that simply sets the #active attribute to true/false. Within the form there is only one single hidden_field. Here is how I currently have the submit button for the form looking when the #active status is true.
When clicked, the form will submit and change the #active attribute to false. When redisplayed it will look like this:
.
Basically the form functions as a toggle switch that behind the scenes submits a form which toggles an attribute to true/false.
It works wonderfully. However, I do not want any of the default button styling. I don't want that gray box or the border. Instead: I only want to show that font-awesome glyphicon for the button, and that is it.
Here is the code I currently have which displays the glyphicon with the gray button css:
<td>
<%= form_for blog do |f| %>
<% if blog.active %>
<%= f.hidden_field :active, value: false %>
<% else %>
<%= f.hidden_field :active, value: true %>
<% end %>
<% if blog.active? %>
<%= f.button do %>
<i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
<% end %>
<% else %>
<%= f.button do %>
<i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
<% end %>
<% end %>
<% end %>
</td>
Question: How can I take the button styling off of the f.submit button and only have the glyphicon to represent the submit button?
Would love to hear if there is a better solution. Basically all I did was added a new css class which sets the background property to none and the border property to none.
<% if blog.active? %>
<%= f.button, class: 'remove-submit-btn-style' do %>
<i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
<% end %>
<% else %>
<%= f.button, class: 'remove-submit-btn-style' do %>
<i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
<% end %>
<% end %>
And then in app/assets/stylesheets/application.scss
.remove-submit-btn-style {
background: none;
border: none;
}
This is the code I have:
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in", omniauth_authorize_path(resource_name, provider) %>
<% end -%>
<% end -%>
</div>
From the code above how can I change link_to "Sign in" with:
<button class="btn btn-facebook btn btn-lg btn-block"><i class="fa fa-facebook fa-2x"></i> | Connect with <br> Facebook</button>
So instead of "sign in" simple button, I will show my custom made Facebook button.
Answer: this is how i solved it
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to omniauth_authorize_path(resource_name, provider), class: 'btn btn-facebook btn btn-lg btn-block' do %>
<i class="fa fa-facebook fa-2x"></i>
|Connect with <br> Facebook
<% end %>
<% end -%>
<% end -%>
</div>
and it looks like this
when someone clicks on that,it gets redirected to the required path,which is omniauth_authorize_path(resource_name, provider)
for those who need the css code for this button here it is
.btn-facebook.btn.btn-lg.btn-block {
color: white;
background-color: DodgerBlue;
font-size: 1em;
&:hover {
color: white;
background-color: RoyalBlue;
}
}
I would appreciate if someone,would tell me how to make the "f" icon,to be in the center of the button.
Thank you
What I did:
<%= link_to raw('<span class="fa fa-facebook"></span> Ingresa con Facebook'), user_omniauth_authorize_path(:facebook), :class => 'btn btn-block btn-social btn-facebook form-control' %>
Im using the bootstrap-social gem and the font-awesome gem to style it exactly like facebook looks :P
https://github.com/gavinkflam/bootstrap-social-rails
I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.
User/Index
<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>
<% #users.each do |user| %>
<div class="user horizontal-align col-md-2">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
<div class="center">
<%= will_paginate #users, renderer: BootstrapPagination::Rails %>
</div>
User CSS
.user {
width: 200px;
display: inline-block;
}
Try the following:
Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
Remove any width definitions in your CSS for .user. Allow width to fall.
Wrap nested columns with .row
jsFiddle: http://jsfiddle.net/zktfu52t/2/
EX:
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<div class="row">
<% #users.each do |user| %>
<div class="horizontal-align col-md-2">
<div class="user">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
try this
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<% #users.each do |user| %>
<div class="user col-md-2 col-lg-2 text-center">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<p><%= link_to user.name, user %></p>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
With this css
.user{
margin:0.2%;
display:block;
}
This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.
Also you have unclosed div tags here:
<div class="panel panel-default">
<div class="panel-heading center">
First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.
To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.