I am trying to display a popover divs here . Please click the question mark icons. You will notice that there is a popover div that shows up in all browsers. However, in Internet Explorer 7, it fails to display properly. I tried using z-index property but that does not seem to work. How can I make the popover show up on top of the input field?
Below is a sample HTML
<div class="col-xs-5 divPopUp">
<label class="control-label customerAccountNo" for="custom4">Customer Acct No</label>
<img src="32005/images/iconQuestion.png" alt="Help" data-toggle="popover" data-placement="right" data-content="Found on the Plush Rewards flyer provided at the store. Lost this? Please contact the store you purchased from" class="popUp customerAccountNoImg"/> </div>
Screenshot added of the issue:
Not easy to solve without a fiddle, but using IE debug tool, I was able to solve the problem, but not sure it really works in live exemple.
I added a z-index in the div col-xs-5 :
<div class="col-xs-5 divPopUp" style="z-index: 100">
Can you edit css for this element ?
Related
I'm not able to change the height of the div when showing the error messages after submitting the form so that there is no overflow. I can set the height property to 1100px so that there is no overflow anymore but it looks quite ugly having so much white space.
I created a JSFiddle because it is a lot of code and since most of the code is relevant for the problem it is quite difficult to reduce it.
<div class="contact-form-wrap">
<div class="contact-form-wrap-left">
<div class="col full-width"><ul class="error-message"></ul></div>
</div>
<div class="contact-form-wrap-right ">
</div>
</div>
I tried to set the height to auto with a min-height of 760px. The div still does not grow. I changed the display property of contact-form-wrap-left to display: inline-block but since float is used this seems not to work.
https://jsfiddle.net/ArisMartinAccola/ud8x5e9o/
I hope someone can help me.
Change place of divs like this
<div class="col full-width"><ul class="error-message"></ul></div>
<form action="config.php" method="post" class="contact-form">
After that set col full-width with position relative and contact-form to relative as well. Of course, use create ID's for both of those
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
<div class="list" ng-controller="ListController">
<div class="list-item list-item-flex" ng-repeat="collaborator in collaboratorList">
<div class="list-left list-left-flex">
<img ng-src="images/{{collaborator.imgUrl}}" width="190px" height="190px"/>
<div class="padded-text">
<h1 class="collab">{{collaborator.name}}</h1>
<p>{{collaborator.info}}</p>
</div>
</div>
<div class="list-right list-right-flex">
<a class="mail" href="mailto:{{collaborator.email}}"> {{collaborator.email}}</a>
</div>
</div>
This is my template for previewing collaborators with their images and info. Every time I close the browser and start it again, upon loading this template the height is normal, but the width of the images is 50.466px even though I've set the width both inline and in CSS. If I resize the window or refresh it they go back to the desired width of 190px. It would be great if someone can help me figure out why this happens.
Edit: This does not seem to happen in Firefox, it does in chrome and IE.
Edit2: I have finally found the solution. My it was a flex-box issue, I have made the image align to the left and the text to the right and all works fine now.
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!