I cannot find any way to change the font styling in a Rails select_tag list
If I try this:
<%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]]), :class => 'formfield'%>
then I can change the width of the select box in my CSS class but I cannot change anything else - height, font-size and color, eg, all have no affect
Similarly, if I try and change style at element level, and even using an example from Rails documentation
<%= select_tag 'testname', options_for_select(options_for_select([ "Denmark", ["USA", {:class => 'select'}], "Sweden" ]))%>
the class attribute has no affect on output (Chrome & Safari on a Mac, Rails 3.1)
So, how can I change the height & text styles within a select_tag in Rails?
I found this on Reddit. posted by u/GroceryBagHead
You cannot style select options. Those are dependent and rendered by your OS/browser. It's possible to replace this control with html elements though.
He posted a link that's now dead for something called bootstrap-select. A google search should help you find more resources
Well, this question is old, but sure you can:
<%= select_tag :blah, options_for_select(#some_options), {:multiple => true, :style => "min-width: 200px"} %>
My suggestion is to check the page source generated by Rails. It will make easier to understand the HTML structure in order to select the elements in your CSS file.
Having the HTML code generated by Rails, your question became related to CSS.
You can include your select inside a div, for example:
<div class="myclass">
<%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]])%>
</div>
So your CSS:
.myclass select {
font: # whatever you want
...
}
.myclass select option {
# in case you want to style the options of a select
}
ETC...
A work around I used was installing a gem called select2
gem 'select2-rails'
If you follow setup process in the docs, you can edit the dropdown list properties pretty easily in CSS. After some messing around in Chrome inspector, I found the relative tags.
/* The dropdown background */
.select2-dropdown{
background-color: #3a3a3a;
font-size: 10px;
font-family: sans-serif;
}
/* Individual styling of list items that are selected (previously chosen) */
.select2-results__option--selected {
opacity: 0.9;
background-color: #505050 !important;
}
/* Individual styling of list items that are highlighted (mouse hover) */
.select2-results__option--highlighted {
background-color: #e66d2d !important;
}
If you want to look into Chrome Inspector yourself, click on the "Select" form field and open the dropdown list. This creates a span element as a child of the body tag shown in the screenshot attached.
Related
Im working on a project in ruby on rails (rails 6), that include a blog working with action-text and trix. I have to add few option to my rich-text editor and there is one that block me for few days.
I added buttons in my trix toolbar, for add more title tag options following this issue and everything worked fine.
But when i try to add text-align options (left, right, center) it dont work
I tried many thing, but i would expect this to work:
in application.js
Trix.config.textAttributes.alignLeft = {
style: { textAlign: "left" },
parser: function(element) {
return element.style.alignLeft === "left"
},
inheritable: true
}
then i insert it in the toolbar like this:
in application.js also
addEventListener("trix-initialize", function(event) {
var buttonHTML = '<button type="button" data-trix-attribute="alignLeft">RED</button>'
event.target.toolbarElement.
querySelector(".trix-button-group").
insertAdjacentHTML("beforeend", buttonHTML)
})
I tried both, with blockAttributes and textAttributes but dont work.
The button appear but does nothing.
What i want is that the div where my text is embed get style=" text-align: left"
Do you have an idea of how i could make it work? or maybe ideas, advices or lectures propositions?
(i saw somes issues in basecamp/trix github that speak about that(this one is really interesting), but its appear that the customized tag option, is not a good option and i didnt managed to make anything else work.
Thanks a lot
I am running ckeditor 4.1.4 on a ruby on rails app. The advanced content editor seems to be stripping anything other than basic attributes.
For example, if I have a word doc with 'this is a test' where 'is a test' is bold, red and 28 point and looking at the contents of the clipboard with clipview shows
<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->
<p class=MsoNormal>This <b style='mso-bidi-font-weight:normal'><span
style='font-size:28.0pt;line-height:107%;color:red'>is a test</span></b><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<!--EndFragment-->
</body>
</html>
It would appear that it is picking up the color,size and bold attributes.
However, when I paste that into a text area using ckeditor and look at the source in ckeditor, I see
<p>This <strong>is a test</strong></p>
The attributes other than strong have been removed.
My body tag on the form is
<div class="field">
<%= f.label :body %><br>
<%= f.cktext_area :body, :rows => 80, :cols => 120 %>
</div>
I have gone into C:\Ruby200\lib\ruby\gems\2.0.0\gems\ckeditor-4.1.4\app\assets\javascripts\ckeditor\config.js and added
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.removeFormatAttributes = '';
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
I tried adding the three config lines inside the block and that didn't work. I read a suggestion about adding them outside the config block so I tried that. I did restart the server but it still strips out the additional attributes.
This is an intranet application and, given our situation, I'm not worried about content filtering. I just want the users to be able to copy and paste with all attributes.
------ edit 1
I looked at the source of the page and see
//<![CDATA[
(function() { if (typeof CKEDITOR != 'undefined') { if (CKEDITOR.instances['document_body'] == undefined) { CKEDITOR.replace('document_body', {"allowedContent":true}); } } else { setTimeout(arguments.callee, 50); } })();
//]]>
</script>
I'm not sure if the allowedContent statement should be working.
There are many ways to configure CKEditor, but the most simple one is passing object as a second parameter to CKEDITOR.replace (just as it's shown in your last piece of code).
However allowedContent: true can be not enough to enable pasting anything, because there are also paste filters in CKE, enabled in default in Chrome and Safari. If you're using that browser, CKE will strip off all classes, styles and div and span elements. To disable that behaviour, you should also pass pasteFilter option set to null:
var editor = CKEDITOR.replace( 'editor', {
allowedContent: true,
pasteFilter: null
} );
If you don't want to mess with configuring CKE, you can also disable paste filter on the fly:
editor.on( 'instanceReady', function() {
editor.pasteFilter.disable();
} );
However disabling that filter can lead to producing very messy HTML, so be warned!
More info about paste filter is available in official documentation.
---edit:
Note that if you are pasting mainly from Word, there are also configuration options dedicated for that case: pasteFromWordRemoveFontStyles and pasteFromWordRemoveStyles.
By default, the tinymce input gets passed to the DOM as a paragraph tag:
I would like to remove that element wrapper so that tinymce passes exactly what I entered in the text editor.
How do I do that ? Please if you provide a code, can you also let me know where that code gets added ?
Regards !!!
Actually I solved my problem. All I had to do was change the styling for paragraph tag :
p {margin: 0; padding: 0;}
You need to specify the forced_root_block to false. However the documentation states that not having your root block as a <p> tag can cripple the editors behaviour. Newlines will be spaced with <br> tags instead.
tinyMCE.init({
selector: 'textarea',
forced_root_block: false
});
See the documentation here
I strip out those pesky things with gsub and regex like this:
<%= #event.desc_long.gsub(/^\<p\>/,"").gsub(/\<\/p\>$/,"") %>
First .gsub removes the <p> at the start of the TinyMCE string, and the second one removes the </p> at the end. Working great for me. This would work for any language that uses regex (gsub is for rails). JavaScript example:
var str = "{TinyMCE HTML string}";
str = str.replace(/^\<p\>/,"").replace(/\<\/p\>$/,"");
Hope this helps!
EDIT:
Re: where to put it. You leave what TinyMCE puts in your database alone. Add the above only when you display it (in the view, e-mail whatever).
In case you just want to get rid of margins:
tinymce.init({
...
setup: function(ed) {
ed.on('init', function() {
var doc = this.getDoc().getElementById("tinymce");
doc.style.margin = 0;
});
},
});
I need dynamic styles for each user. The problem is such that it is possible to choose between two themes, one static and the other user can change. After change current user theme value will set to sass variable and need precompile. How I can do it?
It's better to rely on pure CSS features in this one rather than compile your SCSS on each request (which will be very inefficient).
Given this base SCSS file:
.base-theme {
.color-main {
color: $blue-lighter;
}
// and so on
}
You can use this like this:
<p class="color-main"> ... </p>
Based on settings stored in the database you can generate an alternative
theme like so:
<style>
.alt-theme .color-main {
color: <%= current_user.colors.main %>;
}
</style>
and apply them later like so:
<body class="<%= user.has_theme?? 'alt-theme' : 'base-theme' %>">...</body>
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result: