This may seem like a minor quibble, but why are the symbols #! appearing in my url after opening and closing my modals?
Here's what's in my script tags. The problem likely lies here.
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'right', closeOnClick: true});
$('#modal2').modal();
$('#modal1').modal();
});
</script>
Edit: Added the modal link, which is a rails search form. Modal2 is essentially the same, but for a different resolution
<div id="modal1" class="modal hide-on-med-and-down">
<div class="modal-content">
<div class="center-align">
<h4>Looking for something?</h4>
<div class="search_form">
<%= form_tag search_posts_path, method: :get, id: "post-lookup-form" do %>
<div id="search_border" class="form-group">
<%= text_field_tag :post, params[:post], placeholder: " Search Posts", autofocus: true, id: "search_box" %>
</div>
<% end %>
<div>
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
This briefly caused the hover effects on my side nav to stop working. I fixed it by manually entering the hover effect in my css, but I have a bad feeling that I really didn't address the main problem only the symptom and that this will bite me later on down the road.
I'm currently using the 0.100.2 version of materialize for this project. Let me know if you need more info or code.
It is because of this line
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
Change the href to href='' value and it will not get placed into the url anymore.
Related
Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
My text is overflowing within a span element which has the class: form-control
Code:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<span class="form-control"><%= #stuff.notes %></span>
</div>
</div>
And when #stuff.notes has a lot of text, it overflows like this:
I did look at this question, as well as this ticket within bootstrap. I am still having trouble coming up with a solution.
Update:
I realized I could use a form helper (even though it isn't a form) like this:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<%= text_area_tag :notes, #complaint.notes, {class: "form-control", disabled: "disabled"} %>
</div>
</div>
Which renders it like this:
But I don't like how the disabled html attribute grays out the box and mutes the text. It makes it difficult for the user to read.
You could use a basic panel to get a similar feel. See Bootply Here
<label>Notes:</label>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
And if you really want to match the look of the form-control class, you could add a custom .inset-box-shadow class which would override the box shadow on the panel and give it that formy look. That may confuse users though, they may want to click and type in it.
When I click on the View in Modal, it keeps on displaying only the first record. Even if I click on the second record it still displays the first one. Below is how I implemented the link_to toggle to modal box called myModal.
<%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal"} %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Test</h4>
</div>
<div class="modal-body">
<span class="note"><%= raw(usernote.note) %></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The problem
I supposed you've done something like:
<% #usernotes.each do |usernote| %>
<%= link_to ... %>
// code of modal associated to the usernote
<% end %>
The problem is that you used the same html ID for all the modals (#myModal).Besides the fact ID duplication is not W3C conform, this is the cause of the issue.
When you will click on one of the links, it will open the first modal with the #myModal ID (which is the modal of the first record).
So, how to patch the issue?
Easy way: one modal per usernote
One way, the easy way, is to use different IDs for all the modals. For example:
<%= link_to ... data: {toggle: "modal", target: "#modalForUserNote#{ usernote.id }"} %>
<div id="modalForUserNote<%= usernote.id %>" ...>
// ....
But this way is not the best one: you just create one modal per usernote... If you have 1000 usernotes, you will generate 1000 modals in your html... This is obviously pretty bad...
An other way: javascript callback
An other way to do it will be to create only one modal and to edit its content with some Javascript code.
An example of code can be:
html code
// the modal code
<% #usernotes.each do |usernote| %>
<% link_to ..., data: {toggle: "modal", target: "#modal"}, 'data-usernoteid' => ..., 'data-usernotedata' => ... %>
<% end %>
javacript code (using jQuery)
$('.modalLink').on('click', function() {
$('#modal #idOfTheUserNote').html($(this).data('usernoteid'));
// ...
});
You can note the usage of data attributes.
Data attributes can be replaced by an AJAX request to your Rails application which will returns JSON data.
An other way: AJAX request
The last way to do it is to request your Rails application with an Ajax call. Your application will render an Javascript view (the code will be sent to your browser and evaluated).
This can be simply done by using the remote: true option in your link_to (rails will handle the ajax request by itself.
The following code can do the trick:
html code
// the modal code
<% #usernotes.each do |usernote| %>
<% link_to 'text', some_action(usernote), data: {toggle: "modal", target: "#modal"}, remote: true %>
<% end %>
controller code
def some_action
#usernote = Usernote.find_by_id(param[:id])
end
view to render: for example usernote/some_action.js.erb
$("#modal #modalIdOfTheUsernote").html("<%= #usernoed.id %>");
What is the best way to do it?
Obviously not the first one.
Choosing between the two others just depends on what you want to do:
For real time updates, AJAX request may be better. But you can get some latency because you need to wait the server response.
Otherwise, data attributes are good enough.
3 options here:
generate one modal for each record - the worst thing you can do
use data attributes to update content of the modal
use ajax action where you'll update the content of the modal and open the modal with $('#myModal').modal('show') http://getbootstrap.com/javascript/#modals-usage
1. generate one modal for each record
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal_<%= usernote.id %>"} %>
<div class="modal fade" id="myModal_<%= usernote.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
....
<span class="note"><%= raw(usernote.note) %></span>
....
</div>
<% end %>
2. use data attributes to update content of the modal
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', "#", data: {usernote: usernote.note}, class: 'user_note_modal' %>
<% end %>
$('.user_note_modal').on('click', function() {
$('#myModal span.note').html($(this).data('usernote'));
$('#myModal').modal('show');
});
p.s. why use .modal('show')? just so you make sure to update the content of the modal first then display it.
3. use ajax action - assuming your resource name is UserNote and you have user_notes_controller with show action:
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', usernote_path(usernote), data: {toggle: "modal", target: "#myModal"}, remote: true %>
<% end %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<span class="note"></span>
</div>
</div>
clicking on one link will trigger an ajax event that will expect a show.js.erb template, where you'll update the content of the modal and then display it:
app/views/user_notes/show.js.erb
$('.modal-body span.note').html('<%= j(render #usernote.note) %>');
$('#myModal_').modal('show');
I'm having trouble implementing the wysihtlm5 editor using the wysihtml5-rails gem: https://github.com/NARKOZ/wysihtml5-rails
First of all, my html tags are not saved to the database. Then if the form submit fails, the text_area is only filled with plain text. How can i make sure, the html tags are sent to the server in the right way?
In the debug output i can see that the description is arriving in the controller without html tags:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"fW5FMxr/sgNkLUowLT2E0UfIXtFbXvkOubPYM0GJm0I=", "description"=>"sdfgsdfg"}, "_wysihtml5_mode"=>"1"}
application.js:
//= require wysihtml5
//= require parser_rules/advanced
In my view:
<%= form_for #auction do |f| %>
<div class="control-group">
<label class="control-label" for="auction_days">Beschreibung</label>
<div class="controls">
<div id="wysihtml5-toolbar" style="display: none;">
<div class="btn-group">
<a data-wysihtml5-command="bold" title="CTRL+B" class="btn"><i class="icon-bold"></i></a>
<a data-wysihtml5-command="italic" title="CTRL+I" class="btn"><i class="icon-italic"></i></a>
<a data-wysihtml5-command="underline" title="CTRL+U" class="btn"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="btn">H1</a>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="btn">H2</a>
</div>
<div class="btn-group">
<a data-wysihtml5-command="insertUnorderedList" class="btn"><i class="icon-list-ul"></i></a>
<a data-wysihtml5-command="insertOrderedList" class="btn"><i class="icon-list-ol"></i></a>
</div>
<a data-wysihtml5-command="createLink" class="btn"><i class="icon-link"></i> Link</a>
<!--<a data-wysihtml5-action="change_view">switch to html view</a>-->
<br /><br />
<div data-wysihtml5-dialog="createLink" style="display: none;" class="alert alert-info input-xxlarge">
<label><strong>Link einfügen:</strong></label>
<input type="text" data-wysihtml5-dialog-field="href" value="http://" class="span3">
<a data-wysihtml5-dialog-action="save" class="btn">OK</a> <a data-wysihtml5-dialog-action="cancel" class="btn">Abbrechen</a>
</div>
</div>
<%= f.text_area :description, :id => 'wysihtml5-textarea', :label=>false, :class=>"input-xxlarge", :placeholder => "Beschreibung hier einfügen ..." %>
<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", {
toolbar: "wysihtml5-toolbar",
parserRules: "wysihtml5ParserRules"
});
</script>
</div>
<%= button_tag(type: 'submit', class: "btn btn-success") do %>
<i class="icon-ok icon-white"></i> Send
<% end %>
<% end %>
is the editor load properly? try inspect element in browser for the case when validation fail ,is because what you re saving is plain text, so it will just display plain text for you as well.
I saw there is a html view tag in the demo, maybe you try check whether it can be changed to html text or not.
Additionally:
I personally recommend the plain 1 without gem.
https://github.com/mindmup/bootstrap-wysiwyg
or ckeditor or tinymce :D