I'm using Bootstrap 3 tooltips for a btn-group, and use the same btn-group (which is a partial) in a modal. However, in the modal, the btn-group tooltips do not inherit the styling they have when not inside a modal.
<button id="status-change" v="needs review" data-toggle="tooltip" data-placement="top" title="Needs Review" class='btn btn-default photo-tool-tip'>
<span class='glyphicon glyphicon-eye-open'></span>
</button>
Side note, the modal is in HAML with this javascript tag:
- content_for :javascript do
$('.photo-tool-tip').tooltip();
Is there something I'm not including the button tag, or possibly more specific because i'm working in a modal?
Related
I have a page to edit some information, on this page I have a button which opens a modal, I create the dropdown as so,
<label class="select" style="width: 100% !important">
#(Html.DropDownList("InteractingDrugId", Model.AllSubstances, new { #class = "select2 form-control",
#style = "width: 50% !important",
#data_placeholder = "Type drug to find" })
)
</label>
The button for the modal uses Modal.ID to set the items inside the modal.
<a class="btn btn-warning edit-interaction-ref" href="javascript:void(0)" data-id="#(Model.ID)" data-toggle="tooltip" title="Edit References">
<i class="fas fa-link"></i>
References
</a>
All works fine, and the modal loads correctly with the correct info in, but if I change the option in the dropdown to a different item, the data in the modal stays the same as the one initially loaded on the page.
When I change the option in the dropdown I also want the Modal.ID to change.
Is this possible?
You can try to use js to change data-id when the selected value is changed,but you cannot change Model.ID directly,because it is a c# variable:
<script>
$("#InteractingDrugId").change(function() {
$("a.edit-interaction-ref").attr("data-id", $("#InteractingDrugId").val());
})
</script>
I have a controller in my Rails application which calls a js partial when a certain condition is met:
my_controller
if false == validation_result
render :partial => 'my/show_modal.js.erb'
end
_show_modal.js.erb
$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');
The html.erb called from above code renders a modal as shown below:
_show_modal.html.erb
<div class="modal fade" tabindex="-1" id="notify" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width:1000px;margin-left:-285px !important;">
<div class="modal-body">
<h3 class="modal-title">Please review</h3>
<span style="float: right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</span>
</div>
</div>
</div>
</div>
The modal renders fine; but when I click on Ok button on the modal, the modal dismisses fine as well but leaves behind a light gray scheme on the entire webpage (the webpage seems to loose focus and I have to refresh the page to be able to use it again)!
What am I doing wrong here? How do I dismiss the modal completely so that the webpage could be used again?
UPDATE:
I tried almost all the approaches suggested in how to destroy bootstrap modal window completely? but NONE of them work for me.
I even posted comments on a few approaches listed on the above page stating the backdrop still does not go away for me.
Maybe this is a very ancient-minded-approach but it supposed to work. Assign hideModal() function on click event and see the result.
function hideModal() {
$("#notify").css("display", "none"); // Removing modal container
$(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
$(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
I am using rails, materializeCss modal and braintree 'dropin' to process my forms. I embedded the braintree "dropin" in a div in the form that has a modal class. When you click the checkout button it opens the div with the 'dropin' and form submit button. However the modal div is hidden behind the dark overlay when the checkout button is clicked.
<%= form_for([#listing, #listing.order.new]) do |f| %>
//lots of code
<!-- modal trigger start -->
<button class="modal-trigger btn btn-large waves-effect cyan waves-light" id="book" data-target="modal1">Proceed to Checkout</button>
<!-- modal trigger end -->
<!-- modal start -->
<div class="modal " id="modal1" >
<div class="modal-content">
<h4 id="credit-text center-align">Enter your Credit card details </h4>
<div id="dropin"></div>
<button class="btn btn-large center-align" type="submit" name="action">Request Booking</button>
</div>
</div>
<!-- modal end -->
<% end %>
//added an alert just to make sure the modal is firing.
<script>
$(function(){
$('.modal-trigger').leanModal({ ready: function() { alert('Ready'); }});
});
</script>
I think the fact that the modal div is inside the form may have something to do with it but the forms submit button is inside the modal so I cant put the modal outside the form. How can fix this ? Is there a better way of implementing a modal checkout ?
You might be overwriting z-index CSS rules while styling your modal.
Make sure that your .modal has higher z-index than the overlaying dark background.
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%.
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.