Here's the problem. I have one haml page with a list that looks like this:
It's a list with elements formed by a div (left side) and an ul of buttons (right side). Here's the summarized code:
%li.rutinas-li{style: "overflow:visible"}
%div{ style: "display: inline-block;" }
= link_to ...
...
%br
%p ...
%br
%span
= ...
.thumbs-container
=link_to ...
= icon('thumbs-up', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('thumbs-down', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('star', ...)
%ul.pull-right.without-bullets.no-padding
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block.dropdown
%a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}
= icon('share-alt', ...)
%ul.dropdown-menu{style: "min-width:0"}
%li{style: "padding: 15px"}
= link_to ...
= icon('envelope', ...}
%li{style: "padding: 15px"}
= link_to ...
= icon('twitter', ...")
%li{style: "padding: 15px;"}
= link_to ...
= icon('facebook', ...)
I need the line 1 {style: "overflow:visible"} because the last ul is a dropdown that looks like this:
And if I remove it the dropdown is cropped. However, this css property causes also that when the screen is smaller ( a mobile phone, for example), the list is displayed like this:
And I would like it like this instead:
As the overflow is permitted, the list of buttons on the right are overflowing the parent and his white separators, it is kind of ugly. But if I remove {style: "overflow:visible"} the dropdown won't be visible when I click on it
Your problem is just the width and height of your elements, you must change it if the device is smaller.
Think responsive ! A great solution would be to create a media query and to place your buttons under your text.
If you don't want your ' li ' to have a too big height, you could also place differently your text so it could take the full width too.
Related
A page has a function to choose some values for CSS class attributes.
The rails application show view has a style block and a div using those styles:
<style>
#bg_<%= #promolayout.id %> {
background-color: <%= #background.first.background_color %>;
color: <%= #background.first.color %>;
border-radius: <%= #background.first.border_box_radius %>; }
</style>
<div class='grid-x grid-padding-x'>
<div class='cell small-3' id='bg_<%= #promolayout.id %>'>
[...]
</div>
<div class='cell small-3' id='bg_newrender'> </div>
</div>
Lower in the page are form_with forms to change individual attributes values of CSS items via AJAX. The process updates as expected. The relevant js file for the rendering has two lines, one to display the new value with the form, the other to render (what was expected) a new version of the block with the new attribute (thus creating a before-after view). The second line invokes:
$("#bg_newrender").html('<%=j (render 'promolayout') %>');
the promolayout partial invokes the same CSS classes
<style>
#bg_<%= #promocomponent.promolayout_id %> {
background-color: <%= #background.first.background_color %>;
color: <%= #background.first.color %>;
border-radius: <%= #background.first.border_box_radius %>;
}
</style>
and the div with the id='bg_newrender' renders with the updated CSS attributes as expected.
What was not expected was that the initial div with id='bg_<%= #promolayout.id %>' also renders with the new CSS attributes.
The classes have the same name, but the target div has different IDs.
Why is a differently IDed object on the page also being rendered with the updated class attributes?
If you want to add styling dynamically to a single element instead use inline styling.
Usually we frown upon the style attribute as the rule of thumb is to separate content and presentation. But if you are dynamically generating an inline CSS tag with ERB the separation of concerns went out the window a long time ago and your really just making a mess out of your view.
In your Rails app you'll want to write a helper or builder class that creates the div tag with a style attribute.
Which would look something like:
module PromoHelper
def promo_component_tag(promo, **opts, &block)
options = opts.reverse_merge(
class: 'promo-box', # or whatever
style: hash_to_inline_style({
background_color: promo.background_color,
border_box_radius : promo.border_box_radius,
color: promo.color
})
)
content_tag :div, options, &block
end
private
def hash_to_inline_style(hash)
hash.map do |k,v|
"#{k.to_s.dasherize}: #{v};"
end.join
end
end
This is an extremely simplified example and will need to be adapted to your use case.
And you then call it in your view:
<% #promotions.each do |p| %>
<%= promo_component_tag(promo) do %>
# ...
<% end %>
<% end %>
When it comes to handling the actual user interaction you can either submit the form and have Rails re-render the view and replace the contents in the DOM or you can use element.style or jQuery.css to change the styling optimistically on the fly and just send the AJAX call in the background to update the database values. The latter will give a much snappier feel and ties in nicely if you want to let users preview the change.
So, I have a rails partial (an image of a car) that I want to put between two arrows ("<" and ">").
Here's my haml:
.col-sm-12
<
= render partial: 'vehicle_image', locals: { quotation_request: quotation_request }
>
The problem I'm having is that I can't get the two arrows to show up on the same row as the image.
Any ideas on how this can be fixed?
You could probably assign the arrows to some sort of element instead and lay things out like this
.row
.col-sm-1.text-right
<
.col-sm-10
= render partial: 'vehicle_image', locals: { quotation_request: quotation_request }
.col-sm-1.text-left
>
You may have to do a bit of CSS to reduce the paddings/margins so that it that arrows end up where you want them exactly.
I just attempted it on a personal project using:
.row
.col-lg-1
%h1
<
.col-lg-8
= link_to place_path(place) do
= image_tag place.main_image.url(:medium), class: 'img-responsive img-place', alt: place.name
.col-lg-1
%h1
>
And got roughly this result after a bit of margin tweaking:
I have a menu that is hidden in mobile view of application and viewable in desktop view. So since it's not activated the items in that menu shouldn't be focused when tab through but they are tab-able when the menu is hidden.
This is what I see in applicantion.html.haml
......
.page-layout
.page-layout-sidebar
=link_to '/', class: "page-Branding page-Branding--secondary" do
= image_tag site_logo_src, alt: 'Logo'
%nav.page-Layout-nav{'aria-label' => 'Primary Navigation', 'role' => 'navigation'}
%ul.topia-Nav
- feature :item1 do
%li
=link_to t('menu.item1'), root_path, { :class => 'page-Nav-action'}
- feature :item2 do
%li
=link_to t('menu.item2'), item2_path, { :class => 'page-Nav-action'}
......
I did inspect on page and I see page-Nav-action in multiple css files. I tried using tabindex: -1 in html it works in mobile view but then in desktop view I can't tab through menu items. Also tabindex is HTML attribute so can't use in CSS. I am guessing I have make changes from CSS. Any help is appreciated.
tabIndex is the value you need in HTML. Setting to -1 will make sure the tab button will not focus the element. There's no supported method to do this in CSS. You can toggle the tabIndex value in Javascript.
window.onresize = function(){
if(this.innerWidth > 500){
tabIndexes(0)
} else {
tabIndexes(-1)
}
}
function tabIndexes(index){
var inputs = document.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++) inputs[i].tabIndex = index;
}
I've been working on an application in ruby on rails and trying to display list of check boxes like this
[ ] Conflict Resolutions
[ ] Customer Know how
[ ] personal Branding
But I managed to get this
Conflict Resolution
[ ]
Customer Know How
[ ]
Personal Branding
[ ]
My html.haml file looks like this
.col-md-6.col-md-offset-3
= form_for(#user) do |f|
= f.label :conflict_resolution, 'Conflict Resolution'
= f.check_box :conflict_resolution
= f.label :customer_know_how, 'Customer Know How'
= f.check_box :customer_know_how
= f.label :personal_branding, 'Personal Branding'
= f.check_box :personal_branding
Tried Display:inline for inputtype = checkbox . Didn't work out!!
Use
input[type='checkbox'] { display: block; float: left; }
input[type='checkbox'] + label { display: block; }
If you don't want this to affect the visual representation of checkboxes and following labels on other parts of your application (that uses the same css), you need to give the rule some html context by preceding both rules with a selector matching it's parent (that is different from all other parents on other pages/parts of the application).
If you can change your haml a more elegant solution would be having the label element wrapped around the checkbox so if you click the label it activates the box.
here's how you can do that:
= form_for(#user) do |f|
= f.label(:conflict_resolution) do
= f.check_box :conflict_resolution
Conflict Resolution
= f.label(:customer_know_how) do
= f.check_box :customer_know_how
Customer Know How
= f.label(:personal_branding) do
= f.check_box :personal_branding
Personal Branding
I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?
You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();