Let me first say that the map is drawing correctly, this is not a duplicate of the other maps/bootstrap bug.
I am having an issue where a map on a twitter bootstrap modal is causing the modal to be clipped visually.
This appears to be a Chrome only bug as it does not happen on Firefox or Safari.
I am using: google maps api v3 & twiter bootstrap 3.0.3
The Html
<div id="map_picker" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="map_canvas" style="width:100%; height:300px"></div><br/>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-2">
<label for="address class="control-label">Address: </label>
</div>
<div class="col-md-7">
<input id="address" class="form-control" type="text"/>
</div>
<div class="col-md-3">
<button class="btn btn-primary pull-right" id="apply_location">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
The coffeescript to display the modal
($ '#map_picker').on 'shown.bs.modal', () ->
google.maps.event.trigger window.map, "resize"
The map displays with no problems but the rest of the modal is gone. This does not happen for any other modals on the website (viewing pictures and such).There is no extra css or styling. The modal and all elements are placed correctly and all z-indexes appear correct. The input box and button are still functional they are just not drawing correctly.
Tryout the .noConflict() method, as below:
var bootstrapModal = $('#map_picker').modal.noConflict();
$('#map_picker').bootstrapMdl = bootstrapModal;
This bug was a maps bug and has resolved itself. I have no changed a line of code or updated chrome.
The map no longer messes with its container. I had frozen the chrome version temporarily for this bug. The only factor that could have change was the maps API. While there is no new API version publicly listed, I was not specifying a version number on that page, so I may have been getting an old version.
I wish I had a better explanation.
Related
I am using Seiyria Bootstrap slider bar as shown below. The problem is that when I click on the button to open the Bootstrap modal the slider labels are stacked on top of each other on the left as shown in the print screen. However, if I left or right click anywhere on the modal it shows it properly. In addition, I tried to use the example code outside the modal and it worked fine. I have got this example (Example 19) from this website. Bootstrap Version 3.3.7.
<div class="modal fade" id="exampleModalLong">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="form-group">
<span id="ex18-label-1" class="hidden">Example slider label</span>
<input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
</div>
</div>
</div>
</div>
</div>
<button onClick="$('#exampleModalLong').modal();">click</button>
The slider version:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
This is how the slider is shown when I click on the button to open the modal.
Expected Result - Also, When I click it is shown like this.
I have tried to inspect and fix the labels without any success. I would appropriate it if someone could tell me what I could possibly be doing wrong.
You are missing data-slider-ticks-positions. Add that and it works properly.
<input id="ex19"
type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-ticks-positions="[0,50,100]"
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
I want to know if you can use one div and have it pop on with CSS in other places to save space and make things more organized. I have a set of code that uses the same lines for a lot of it, it's buttons and what have you in a pop up. So I want to sit the div in a nice spot and use CSS to have it pop up under different pop ups
<div class = "example">
<ul class = "list">
<li>example</li>
<select name = "example">
<option value = "0">0</option>
</select></li>
<input ...example text...>
</ul>
</div>
So that sits inside another div that is an image and some text that CSS has pop up when a link is clicked, it's just a list of things to pick for a e-commerce page, I have to rewrite it each for each new item, the CSS I have for it just sets the pop up display and I have jquery for the pop up action. Instead of having that said code above being rewritten each time I want it once and use CSS or java to have it pop up with all of the pop ups
You could bootstrap and a modal for popups since you will have an easier time with them and you can do all sorts of things with modals.
And Bootstrap is INCREDIBLY easy to use
Bootstrap Modal example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
This is the example from W3 Schools - I know it seems like a lot, but Bootstrap will change your web design world :)
save the code you wrote (ex: as example.php).
then you can use it with other pages using an include/require:
for example: (example2.php)
include 'example.php';
or
require 'example.php';
You can use this syntax anytime and anywhere within the php file.
So I have a google map where the user selects their location, and I am trying to validate that they have selected a location, by populating a hidden input field. I was able to get it to work with a different validation engine, but now need it to work with parsley.
If the user has not selected a location, I need it to display the error message, as with all other validations. All my other validations are working, so I suspect it is something with my syntax. I am a bit confused by the parsley documentation as far as hidden input fields.
Here is my html:
<div class="col-md-6">
<!-- WIDGET GOOGLE MAP -->
<div class="widget">
<div class="widget-header" style="height: 115px;">
<h3><i class="fa fa-globe"></i> Part II: Click & drag to select your location <small>(Your actual location will never be stored or shared. It will always be randomized within a five (5) mile radius when shown to other users)</small></h3>
<em>- custom styled google map</em>
</div>
<div class="widget-content no-padding" style="height: 300px;" >
<div class="google-map">
<div id="register-map-canvas" style="height: 300px;"></div>
</div>
</div>
<div class="widget-content">
<div class="form-group">
<input type="hidden" name="homelat" id="latFld" required data-parsley-errors-container="#error-map"/> <!--the homelat input field is below the map only because it looks silly with two adjacent error messages-->
</div>
<div class="form-group">
<input type="hidden" name="homelng" id="lngFld" />
</div>
<p id="error-map"></p>
<button class="btn btn-primary btn-block" type="submit">Register</button>
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
<!-- END WIDGET GOOGLE MAP -->
</div>
So as you can see, I am trying to get the error message to pop up beneath my map within a widget box.
I populate the latFld and lngFld inputs but only validate one of them, so as to only generate one error message. But unfortunately I cannot get that one to validate. I know the fields are populating.
In the js parsley file (~line 195) you must on excluded: line put in comment or delete input[type=hidden]'
var ParsleyDefaults = {
// ### General
// Default data-namespace for DOM API
namespace: 'prsly-',
// Supported inputs by default
inputs: 'input, textarea, select',
// Excluded inputs by default
excluded: 'input[type=button], input[type=submit], input[type=reset]',
//input[type=hidden]',
I've been getting this weird bug with Bootstrap Modals for a few days now, and can't seem to find any sort of answer online. I'd be grateful for any sort of help on this.
My site uses AngularJS + Bootstrap. The specific part I'm working on right now has two buttons that bring up a modal, and a grid below them that shows the user a bunch of info. The weird part is, the button that allows users to create an entry on the grid will bring up a form, but not allow them to edit the first two fields. The second button, which lets users edit an entry on the grid, is pretty much formatted the same as the create button, yet that works fine. This also only occurs on page refresh only, and is resolved after the user clicks the edit button to bring up that modal, then closes that. Afterward, the create modal will work fine. Here is the code for these parts of the site:
Modal Buttons:
<div class="row-fluid" ng-init="getAllSources()">
<!-- Create Source Modal Button -->
<button class="btn btn-success" data-toggle="modal" data-target="#createSource" ng-click="initCreateSource()">+ Create Source</button>
<!-- Edit Source Modal Button -->
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#editSource">Edit Source</button>
<!-- Sources Grid -->
<div ng-show="visible.grid == true" class="edus-admin-manage-grid" style="margin-left:0;" ng-grid="sourceGridOptions"></div>
</div>
Modals:
<div class="modal fade" id="createSource" tabindex="-1" role="dialog" aria-labelledby="createSourceLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createSourceModal">Create Source</h4>
</div>
<div class="modal-body" ng-include="'source-create.html'"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="getAllSources()" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="getAllSources()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
(The Edit Sources Modal looks the exact same as the Create Sources Modal, with the exception of a different link in the ng-include, and some labels here and there)
Here is the part of the code that doesn't 'work' on page refresh:
<form name="form" novalidate>
<div class="row-fluid">
<label for="inputID">* Source Id</label>
<label for="inputName">* Source Name</label>
</div>
<div class="row-fluid">
<input type="text" class="span4" id="inputId" placeholder="Title" ng-model="createSource.createId" required>
<input type="text" class="span8" id="inputName" placeholder="Source Name" ng-model="createSource.createName" required>
</div>
<div class="edus-admin-manage-label-rows row-fluid ">
<label class="edus-admin-manage-label span4" for="inputId">* Activity Name</label>
<label class="edus-admin-manage-label span4" for="inputName">* Activity Label</label>
</div>
<div class="row-fluid form-inline">
<select class="span4" ng-model="activityType.activity" ng-options="value.name for value in multipleActivityTypes" data-style="btn" bs-select></select>
<select class="span4" ng-model="activityType.label" ng-options="value for value in activityLabels" data-style = "btn" bs-select></select>
<input class="btn btn-default span4" type="submit" ng-click="activityTypeSubmit()" value="Add Activity" data-style="btn"/>
</div>
...
</form>
Everything else after the '...' in the third snippet of the code works - I just can't select any options from the pull down menu, or input anything for the Source Id/Name fields. I figured the ngClick I had in the Create Source button that brought up the modal could've been the problem, so I removed that to see if the form was editable - no luck there. Any help is greatly appreciated!
Update:
Originally, I had my HTML organized as so:
<div>
<!-- Modal Buttons -->
</div>
<!-- Modals -->
When I moved my modals back into the divs that contained the buttons, like so:
<div>
<!-- Modal Buttons -->
<!-- Modals -->
</div>
everything worked as intended. This seems like some sort of scoping issue, which I didn't think would cause a problem in HTML - can anyone shed some light on this type of problem?
It's very hard to determine issue when you paste it here wildly. Please use plunker for such issues. And look at this demo in Plnkr
Consider your data structure is like
$scope.activityType = {
'activityType.activity': {}
};
$scope.multipleActivityTypes = [
{
'name': 'asd',
'val': 123
},
{
'name': 'qwe',
'val': 234
}
];
p.s. i should comment this, but not enought pts. so sorry for that
I'm trying create some bootstrap modals but I'm having an issue.
I have a web page containing the definition of a modal and some tabs such as:
<div id="myModal" class="modal show fade">
<div class="modal-header">
<h3>My Modal</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Field</label>
<div class="controls">
<input id="my-field" class="" type="text" disabled="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div class="tabbable custom-tab">
<ul class="nav nav-tabs">
<li class="active">Tab1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
........
</div>
etc...
</div>
<div>
When activated the modal covers the tab controls. Without the definition of the modal the tabs work fine but with the definition I cannot click on the tabs (or atleast some of them), that is the cursor doesn't change to the little hand to allow me to click on them. It's as if even though the modal is hidden it is covering the tabs. However, after activating the modal and then closing it I can then click on the tabs as normal.
Any ideas as to what is going on?
Thank you for reading.
Are you trying to make the modal fill the whole screen? I ask this because you have omitted two divs that make up the modal: modal-dialog and modal-content. The point of the modal is to bring up another screen without having to serve another page to the browser.
I added the two missing div here http://www.bootply.com/94913, so you can see the difference from this version http://www.bootply.com/89609.
The reason you were unable to click the tabs is because the modal was called at the start instead of via a button or link. Since you omitted the two div mentioned above, this cause the modal to fill the screen and not allow access to the underlying page. Also, since the modal filled the screen, you could not simply click off of it to dismiss the modal and continue. Your only option at that point was to click the close button.
Also, a 1000px modal is not suggested as it will cause scrolling of the browser window on most viewing platforms. Unless this is being designed as a full-screen desktop only application, please plan your modals accordingly. The general rule of thumb that I use is if the modal occupies more than a quarter of the existing website, it probably deserves its own page, or should be incorporated into another section. When you introduce scrolling and modals, you have to take into account the click-off dismiss and either set the modal-backdrop to static or some other custom handling.
I believe the issue is with your Modal
Take out the show class from your myModal div
<div id="myModal" class="modal show fade">
To
<div id="myModal" class="modal fade">
The show class seems to interfering with the tabs. Take a look at this example.
http://www.bootply.com/89609
Just add the "display:none;" to your modal div style :
<div id="myModal" class="modal show fade" style="display:none;">
This way it is out of the way until you want to access it.