I'm trying to implement Bootstrap JS's Popover (this), and for some reason it's not showing up like it's supposed to.
This is what I'm getting
As you can see, the body of the Popover is shifted towards the left, and the border's kinda broken.
Here's my code
<a class="btn success" id="previewBeforeSubmit" href="#"
data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>
<script type="text/javascript">
$("#previewBeforeSubmit").popover({position: 10, placement: 'above'});
</script>
Any clue as to what's causing this?
Most likely a CSS conflict. Your existing css rules might be adding attributes to the ones of the popover. I would start with an inspection in FireBug and see what css rules are inherited from where.
I guess you are using their container example. If yes, you can fix this problem by comment out line margin: 0 -20px. It appears in the following block:
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px;
...
}
It's a margin thing, add
.popover .content {
margin: 0;
}
this should fix your problem.
The more universal fix is to add data-container='body' to the element to stop it from inheriting css rules from (and through) the element.
Related
So I am using smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard.
I have included it in js-popup, so when I open the popup it does not show the first step. I need go to the second step and then go back to see the first step
I had the same problem, what I did was download the smartWizard css, the smart_wizard_all.ccs version and in the last line of the file add:
.tab-content {
height: auto! Important;
}
I hope it works for you. Sorry about my English I am using the google translator hahahaha,
Greetings,
i escape this case by "onmouseenter" after call show modal.
<div id="modal" onmouseenter="call_wizard()">
<div id="wizard" class="form_wizard wizard_horizontal">
<!-- step 1,2,3,4 -->
</div>
</div>
<!--$('#modal').modal('show');-->
<script>function call_wizard(){$('#wizard').smartWizard();}</script>
Not exactly a fix, but I found a workaround. Looks like the step-container initializes with height zero. Don't know why this happens, but we can override it in the css file. In the css file you are using to style your "Smart Form", look for a class called stepContainer.
.form_wizard .stepContainer {
display: block;
min-height:500px; // Add this line with your minimum height
position: relative;
margin: 0;
padding: 0;
border: 0 solid #CCC;
overflow-x: hidden; }
This should fix your problem until someone can explain why it happens in the first place.
I am getting the same kind of problem as element is previously hide and when I show that element then I am getting same problem so I tried this below code and its work for me
`$('[name = elementName ]').show(1000, function() {
$("#wizard").smartWizard("currentRefresh");
});`
Its actually load the fist step but it set its height to zero as its is previously hidden but after applying $("#wizard").smartWizard("currentRefresh"); it refresh the current step and set proper height.
I am trying to use getorgchart jquery plugin. And I want to remove the 'GetOrgChart' hyprlink which is showing in the bottom of the screen. I have tried removing it from getorgchart.js file but it is still showing up. Is it part of the theme? How Can I stop showig it on my webpage???
Please help..
Try this, It worked for me.
Add following code in your html page.
$(document).ready(function(e) {
setInterval(function(){ $('a[title="GetOrgChart jquery plugin"]').hide(); }, 10);
});
Open file getorgchart.js and find eval(eval("String.fromCharCode(blah3x...)"))
and delete it or comment.
Try This,
In your orgchart.html page, paste this snippet
<div style="display: block; position: absolute; bottom: 15px; right: 0;z-index: 214748336480 !important; height: 25px; width: 100px; background: #333;"></div>
Change width, height and background to your liking. But make sure z-index is higher than what I have mentioned, this is the important point here. Hope this helps. Thank you.
In order to remove the getorgchart logo you need to buy a license http://www.getorgchart.com/Buy
I use the following to temporarily disable eval(), which GetOrgChart uses to keep the logo on display:
<script>__eval__ = eval; eval = function () { };</script>
<script src="getorgchart.js"></script>
<script>eval = __eval__;</script>
COMPLETE CODE IN FIDDLE LINE 36 JAVASCRIPT IS ISSUE PART https://jsfiddle.net/ybp7gtup/7/
I want to change the color of the icon using js or jquery as I am using form validation to change color on user behaviour. I can't seem to select the <i> in the DOM, can anyone advise?
html:
<div class="col-xs-1 col-md-1 icons-div">
<div class="row">
<i class="fa fa-user fa-color"></i>
</div>
</div>
CSS:
select:invalid {
outline: none;
box-shadow: 0 0 5px red;
}
select:valid {
outline: none;
box-shadow: 0 0 5px #449d44;
}
.fa {
font-size: 3em;
}
.fa-calendar {
font-size: 2.5em;
}
.hide-div .fa {
font-size: 1em;
}
.red {
color: #FFA5A5;
}
.green {
color: #449d44;
}
jquery:
$('.fa-color').addClass('red');
Your assumption that the jQuery is not working is wrong. Your problem is that your selector is (most likely) weaker than the one applying the color property on the element when it has both fa-color and red classes. This should work:
.fa-color.red {
color: #FFA5A5;
}
Try with to edit the fa-color class ( no need to use jquery )
.fa-color{
color: #FFA5A5 !important;
}
Just add an ID. and
<div class="col-xs-1 col-md-1 icons-div">
<div class="row">
<i class="fa fa-user" id = "color_guy"></i>
</div>
</div>
then with jQuery:
$(document).ready(function() {
$('#color_guy').addClass('red');
)};
This should work!
It was weird, but jquery would randomly not select certain elements (or that is what appeared to be happening). Regular js would select the element, and a few times I just plowed on, but in one case I really wanted to use jQuery's toggle(). I couldn't even figure out how to search for an answer until it dawned on me that it wasn't random at all, but always font awesome classes where jQuery failed (but produced no errors).
After struggling all day with this, I stumbled across this article that seems to address this issue. It sounds like font awesome is affecting something in the element, which makes the jquery statements not work as expected. I believe the work-arounds given in the article are going to work, but i haven't tested them yet.
https://fontawesome.com/how-to-use/on-the-web/using-with/jquery
ABE:
So, the article says that the font-awesome script seeks out the tags with the fontawesome classes (fas, fa, etc) and REPLACES them with , so it suggested adding an extra js reference that would cause fontawesome to NEST the tags inside the original tags. Sounded like a winner, but it didn't work for me.
Then I found THIS article on fontawesome's site that shows how to use fontawesome via css pseudoelements, and I thought that would work, but it did not.
Frankly, at this point, I'm ready to just use icon images. I'm not very good at javascript or jquery and this is way more complicated than it seems like it should be.
* UPDATE *
I was not preceding the class name selector with a "." in the jQuery. so, for example, I was writing $('icon') when I should have written $('.icon'). Man, like a day and half wasted over a stupid dot. EVERY method works fine if the class name selector is typed in correctly.
Tested your code in a jsfiddle, it works.
You might have forgotten to include JQuery into your document header.
For example:
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/
See the page at: http://216.231.135.200/test/view.html
As you click 'Next', the next bar will first extend and then contract back, which is not the effect I want. Can anyone help me?
--Update:
He means when the animation is done, the bottom part of the element
judders. He wants to prevent that. – lolwut
I think the best solution is to explicitly give all the div.step-container a height using css.
Give your .step_container class a fixed height.
Solved it with some css: http://jsfiddle.net/maniator/VLSc9/
.step-container {
display: none;
font-size: 18px;
margin-bottom: 20px;
margin-top: 20px;
height: 21px; /*stops the jitter */
max-height: 21px; /*stops the jitter*/
}
Instead of show() try slideDown() maybe thats what you mean?
You can find a list of other animations/effects on the jquery api documentation page
Else please specify your expected behaviour.
It seems jQuery can't calculate correctly which height the new container needs to have, if you can specify a height for the container it should be fixed...