For some reason the select rails tag results in a very ugly grey select box. I've been looking around for a way to change this, I'm guessing some sort of default CSS is generated for select boxes by rails but since I have deleted the default stylesheet that rails builds I have no idea where these settings would be set from.
How can I change this ugly default style?
What is the default CSS for a select (outside of ruby)?
EDIT: Turns out the problem is that I"m running it on VirtualBox Linux and the default select box there is the problem.
It's probably the browser default?
Adding select { } to your stylesheet and then customizing it with your own rules will cover all the tags without adding a class to every select box you create. Not that that's a bad idea.
Perhaps you should just override select in one of your CSS files?
css:
.select { … }
view:
<%= select(…, :class => "whatever") %>
Take a look in /railsproject/public/stylesheets.
It's dependent on your operating system, and CSS gives you very little control of how it looks. If you are using jQuery, you could use a plugin such as this.
Related
I'm barely beginning to understand Ruby on Rails and there are a lots of things I don't get to remember correctly, so I wonder if there's a way to enable suggestion and autocomplete for functions in html.erb files.
Right now it suggest me things when I'm working on ruby files, but this is not the case in html.erb files so I make a mess each time I try to remember how to do something until I find that I'm looking for 'yield' or 'provide'... I know is not a big help but I would love if sublime could suggest me this when I type 'y' or 'p' between <% %> tags.
there are a few packages you can check for sublime text 3 ,
https://github.com/matthewrobertson/ERB-Sublime-Snippets
https://github.com/CasperLaiTW/ERBAutocomplete
some convenience you can get are, just write
er and tab which will print <% %>
ep and tab which will print <%= %>
If this is about the autocomplete popup not showing while typing, rather than completions not working when pressing the Tab, you need add the scope to you auto_complete_selector setting. By default, Sublime Text shows this popup only when working in the source scope, even though you can force showing the popup when pressing Ctrl+Space. To change this, open your user preferences (Preferences > Settings User) and adjust the auto_complete_selector by adding the text.html scope (or the more limited text.html.erb).
I was wondering if there is a way to get Sublime Text 2 to autocomplete HTML attributes like in Aptana?
Autocomplete is enabled by default when you use "<" and your tag and then hit enter. So if you enter <p and then hit enter it will finish out the tag pair for you... where you will end up with <p></p> and your cursor will be in the middle. You can change this to tab if you prefer by pasting the following into your Preferences -> Settings - User file:
{
"auto_complete_commit_on_tab": true
}
This will override the default value of false for completion on tab. Again that is only if you wish to use tab instead of enter.
Hey you may try https://github.com/agibsonsw/HTMLAttributes or install trought package control package called "HTMLAttributes" ;). Its works for me. For example you type:
<p then press space bar then ctrl+space and you got list of attributes.
You can try to use emmet package. It was made specifically for html&css code completion. For more information you should read the documentation.
I was having the same issue; although I use both plugin packages HTMLAttributes and Emmet, neither one provides the auto-complete functionality I was looking for that's similar to Dreamweaver's.
Solution: I found a package called SublimeCodeIntel that does exactly what I needed.
Example: I code html emails and do a lot of inline CSS. End goal:
<td style="vertical-align:top;">
After installing SublimeCodeIntel, I typed <td style="v and a list of CSS properties starting with "v" displays.
Using my arrow keys, I select vertical-align and press tab to confirm, then type the letter "t" and a list of CSS values now displays.
I select top and then press tab to again confirm my selection.
Note: You can create predefined snippets for Emmet for undefined CSS properties but I wanted something "out of the box" instead of having to a) learn how to create them via the documentation (though I'm sure it's simple), and b) create a snippet each time I came across an undefined CSS property/value like vertical-align.
Hope this helps.
All,
BACKGROUND: I have a collection_select statement that displays a dropdown box.
OBJECTIVE: I'd like the dropdown to be an image that the user clicks to see the collection rather than the default box + down arrow that appears.
You need something like this plugin for jQuery. It allows you to replace a normal select with a custom one based on your wants. You would have to write your own select helper since you need to add the attributes to the select options that this plugin requires. If you get started and need help, post back here with what you're stuck on.
I've created a theme and applied it to my ASP.NET MVC site. However, the elements on the page aren't picking up the styles automatically. If I do the following for a specific element they get applied appropriately:
$("input[type=button]").button();
$("input[type=submit]").button();
Am I right in thinking I need to do this for all the different elements? Perhaps incorrectly, I assumed this would be done automatically by referencing the css and custom js files?
Thanks
you can write :submit instead of input[type=submit], but I know that's no the answer of your question.
The jQuery UI library only provides code to style your website, but it doesn't do it automatically. So what you need to do is something like this:
$(":submit, :button, :reset").button();
But sometimes you want to use icons or something like this, then you can use
$("#specificButton").button("option", "...", "...");
I hope it helps!
Updated Example
I am using a Select Box as a nav. When I select an item, I would like to be redirected to that page.
= select (#organization, "tabs", #organization.tabs.collect { |t| t.title }, {} { :onchange => "escape_javascript(#{ render edit_organization_tab_path(#organization, this.value)})"} )
So this example does not work because I am not sure how to pass a Javascript variable to Ruby
Is it possible to do this entirely in Ruby? Or do I have to use jQuery?
If you're using jQuery, you can do it with something like this:
= select(#organization, "tabs", #organization.tabs.collect { |t| [ t.title, edit_organization_tab_url(t) ] }, { }, :onchange => "window.location.href=$(this).val()")
The value for each item in the select list should be the URL you want to redirect the person to.
I'm not sure what you meant by putting a Rails render call inside a JavaScript block.
Have you considered how this might degrade if the user does not have JavaScript enabled? Ideally the link elements would still be available as regular <a/> elements so a user could still visit a page without JS. Especially since your select box controls site navigation, I'd recommend a "progressive enhancement" solution and write the markup first without JS, then add in JS behavior on top of it. You may want some CSS and <div/> elements that resemble a select box but are not literally a select box, this way you have more control over the contents. Couple of other things, as tadman pointed out, redirecting the user in JavaScript boils down to setting window.location. If you are using jQuery, check the change event which you can attach to selection events in your combobox, and redirect the user as necessary. Finally, using CSS3 border-radius and other properties, you could create something that looks very similar to a select box, but has much more functionality. You could also find a component like this, googling turned up this example.
You don't need jQuery, but you will need Javascript. Ultimately, you will either need to use (and possibly create) a helper that will create a navigation-ready select box (including the necessary Javascript code) or add event listeners to your select directly in your view (inline or in an included script).