I have a textarea that provides real-time suggestions as user types the text.
These suggestions are displayed in the dropdown menu.
The issue I am having is that the dropdown menu covers part of the DIV that sits right below the textarea.
I need to push down the page content when the dropdown opens, so entire page content is always visible.
HTML code:
<textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>
<div id="quickHelpWrapper">
<br><small><b>Quick Help</b></small>
<div id="quickHelp">
Additional Info 1<br>
Additional Info 2<br>
Additional Info 3<br>
Additional Info 4<br>
Additional Info 5<br>
</div>
</div>
Essentially, I need the DIV called quickHelpWrapper, pushed down when textarea dropdown opens.
Example on JSfiddle: https://jsfiddle.net/jarosciak/kjy149p5/
Here is a screenshot:
The jQuery UI autocomplete feature that you are using here positions this element relatively - so you would have to overwrite that. (The position option can’t fix this AFAIK, because that only allows to specify where the element will be positioned in relation to another, but it doesn’t allow to specify “no positioning at all please.”)
You can solve this via these three steps:
Put a container element around the textarea (because we can’t append elements directly to the textarea):
<div id="foo">
<textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>
</div>
Add the appendTo option to your autocomplete initialization:
.autocomplete({
delay: 50,
minLength: 1,
multiline: true,
autoFocus: true,
appendTo: '#foo',
source: function(request, response) {
…
And finally, add this to your stylesheet to overwrite the position: relative inline style this plugin sets,
.ui-autocomplete {
position: static !important;
}
Your example, modified accordingly: https://jsfiddle.net/kjy149p5/17/
added css:
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete
{
position:relative;
max-width:524px;
}
linky:
https://jsfiddle.net/kjy149p5/20/
Related
I am using github-calendar to show my Github contributions on my website. I would like to add a title to the chart like it is shown in this comment. In my case, I just want bold text saying 'Contributions in the past 365 days.'
Screenshot of what I want
I have tried adding text inside the div, but it appears to be overwritten because I don't see it in the DOM.
<!-- Prepare a container for your calendar. -->
<div class="calendar">
<p>Contributions in the past 365 Days</p>
</div>
<script>
GitHubCalendar(
".calendar",
"jsolly", {
global_stats: false,
responsive: true,
});
You might need to fork Bloggify/github-calendar and modify lib/index.js yourself.
For instance, using a insertBefore method to insert an <h2></h2> title before the svg.js-calendar-graph-svg section.
I'm trying to add field validation to a "Contact Us" form using Bootstrap and a validation library (a jQuery Plugin) called Validetta (http://lab.hasanaydogdu.com/validetta/).
After implementing the form and the validation, though, I am noticing a problem with the z-index of the tooltip that causes it to show up beneath the next form field.
If I were dealing with normal HTML and CSS, I think the answer would be a little more clear to me, but with Bootstrap, I do not know what sort of mysticism is afoot and am having trouble finding answers on how to solve this problem in the best-practices way.
I know that Validetta is adding a <SPAN> after the form field and is applying a custom CSS class to it, which I can easily modify, override, or append. I've also read, in other contexts, that this problem can be solved using a combination of z-index and position on the tooltip SPAN and one or more of its parent elements... but all of my quick tests and trials have not had the desired affect.
Here's the rendered HTML for the form field shown above:
<div class="form-group has-feedback has-error">
<label class="control-label" for="inputFromName">Your Name</label>
<input type="text" class="form-control" id="inputFromName" name="fromName" placeholder="Your Name Here" data-validetta="required" data-vd-message-required="This field is required!">
<span class="validetta-bubble validetta-bubble--bottom">This field is required!<br></span>
</div>
Any help would be much appreciated!
you may check the z-index attribute on parent elements of "validetta-bubble" ;
because z-index judge from parent to child, if a parent has a lower z-index while child elemtn has a higher this element's z-index finally work base on the parenet's
you may try to set form-group's z-index
.form-group {
z-index: 10000;
position: relative;
}
and set a higher on target like answer 1
.crazy-zindex {
z-index: 10001;
}
Ultimately, I found the answer to this question here: z-index of hover tooltip with CSS
The answer from Панайот Толев provided this example:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
So, to solve the problem, I wrapped each row of form elements in a div that specified a z-index in the style attribute. As I went down the rows, I decreased the z-index value, like so:
<div style="z-index: 23;"> .. </div>
<div style="z-index: 22;"> .. </div>
<div style="z-index: 21;"> .. </div>
This ensured that each row fell "behind" the one above, which allowed tool-tips to appear on top of the fields (and labels), rather than beneath them.
I had same issue.
When no other script solved my problem. Then I had used parent class as data-container.
For exp.
<ul id="responsivator">
<li data-placement="bottom" data-toggle="tooltip" data-container="#responsivator" title="iPhone landscape Preview" >
</ul>
I would add a custom class like crazy-zindex (I'm sure you can come up with a better name) and a rule in the css for it.
HTML
<span class="validetta-bubble validetta-bubble--bottom crazy-zindex">This field is required!<br></span>
^^^^^^^^^^^^
CSS
.crazy-zindex {
z-index: 10000;
}
Its important to remember that CSS is cascading, so the last rule will overwrite anything above it, with this said, any overwrites you want to do to bootstrap you'll have to link that stylesheet after bootstrap. Or you can use !important but that's not good practice.
I have a somewhat unique problem. I am working on a CMS for websites, and we are attempting to implement Inline Editing on our sites. We want to use TinyMCE's inline editing feature, where you create a div and that div becomes the editor on initialization.
The HTML:
<div class="editable-text">
<p>My editable text here</p>
</div>
And the javascript:
tinymce.init({
selector: ".editable-text",
inline: true,
plugins: ".....",
toolbar: ".....",
menubar: false
});
The Problem
The problem is, I need to be able to save the page content after a user has edited a page, but Tiny adds in a bunch of extra classes and HTML to my edit area, which I do not want to save:
<div spellcheck="false" style="position: relative;" id="mce_5" class="editable-text mce-content-body" contenteditable="true">
<p>My editable text here</p>
</div>
<input name="mce_5" type="hidden">
I have looked for different solutions on how to "disable" Tiny before saving the content, but the only solutions I have found have been to completely remove the element (in my case, the div with all the content in it that I want to save!). Is there a way to "disable" Tiny (i.e. remove all of the junk it puts in) without also stripping out my content?
Thanks,
I've created a custom tinymce plugin to Add Headers,
(this plugin used to add readonly text into the editor)
these headers are inserted into a div with attribute
contenteditable="false"
Like <div class="headerDiv" contenteditable="false">Marks</div>
(headerDiv is used to set the div as inline)
I havn't use the tinymce noneditable plugin regex , for me it's not working on inserting from a listbox. (please check the images)
The problem arises when i try to align the selected content with noneditable headers,
the headers will displayed on next line. (please check the image)
I've checked the tinymce_src.js, from that i understand how alignment works,
they get the content from the editor and wrap a div around it,
and align that div using text-align property.
In wrapping section they check the selected content has a html tag,
if the tag was found then they split the content into 3
i.e
content before the tag
content with html tag
content after the tag
and wrap this 3 part with a div
Example for tinymce selected content : raw tepmlate Marks
part 1 : <div style="text-align:center">raw tepmlate</div>
part 2 : <div style="text-align:center"><div class="headerDiv" contenteditable="false">Marks</div></div>
part 3 : <div style="text-align:center"> </div>
Any guidance and help is appreciated..!
style="display: inline-block;"
?
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});