javascript - Why does last popover link in navbar not centre on object? -


i using bootstrap.js build simple ui. part of ui want use navbar.

on navbar, have popover under each of items in navbar. works ok.

what have noticed, popover on last link item in nav bar not position correctly.

it not matter if last item third of three, or sixth of six, last item affected.

i can workaround not using popover on last item, not understand why occurring.

i have tested in chrome 28 , firefox 21 locally same results.

my question is: why last popover in code below cause strange rendering issue?

nice example (cursor hovering on middle link) : cursor hovering on middle link

yucky example (cursor hovering on last link): rendering not quite right on popover

the code using reproduce behaviour:

<html> <head><link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen"></head> <body> <div class="navbar">   <div class="navbar-inner">     <ul class="nav">       <li><a href="#" id="l1" rel="popover">abcdefg</a></li>       <li><a href="#" id="l2" rel="popover">abcdefg</a></li>       <li><a href="#" id="l3" rel="popover">abcdefg</a></li>            </ul>     </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="http:///netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-popover.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script> <script> $(function ()   {      var globaldelay = { show: 200, hide: 100 };     var lcontent = "abcdefg abcdefg abcdefg";     var ltitle = "abcdefg abcdefg abcdefg";     $("#l1").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globaldelay});      $("#l2").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globaldelay});      $("#l3").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globaldelay});  });   </script>  </body> </html>

it appears relate width of object contains list items.

if make slight change code above (shown below), can workaround behaviour. appears width of ul object rendered bootstrap, causes final popover chopped short, results in arrow div offset against list item in navbar.

<div class="navbar">   <div class="navbar-inner">     <ul class="nav" style="width:100%;">       <li><a href="#" id="l1" rel="popover">abcdefg</a></li>       <li><a href="#" id="l2" rel="popover">abcdefg</a></li>       <li><a href="#" id="l3" rel="popover">abcdefg</a></li>            </ul>     </div> </div>

Comments

Post a Comment

Popular posts from this blog

curl - PHP fsockopen help required -

i trying work on cloudflare api , have found in documentation. unfortunately have no idea how can use in fsockopen or through curl. here example of post request. need know how can make request below data post using curl or fsockopen curl https://www.cloudflare.com/api_json.html -d 'a=cache_lvl' \ -d 'tkn=8afbe6dea02407989af4dd4c97bb6e25' \ -d 'email=sample@example.com' \ -d 'z=example.com' \ -d 'v=agg' here link cloudflare https://www.cloudflare.com/docs/client-api.html#s4.2 try one: $ch = curl_init("https://www.cloudflare.com/api_json.html"); curl_setopt($ch, curlopt_returntransfer,1); curl_setopt($ch, curlopt_followlocation, 1); curl_setopt($ch, curlopt_ssl_verifypeer,false); // handling of -d curl parameter here. $param = array( 'a' => 'cache_lvl', 'tkn' => '8afbe6dea02407989af4dd4c97bb6e25', 'email' => 'sample@example.com', 'z' =...
Read more

HTTP/1.0 407 Proxy Authentication Required PHP -

i working in restricted network/limited access internet. since have use proxy make web service call. here php code calling web service , response . $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' => $proxy_host, 'proxy_port' => $proxy_port, 'proxy_login' => $proxy_login, 'proxy_password' => $proxy_password)); response is fatal error: uncaught soapfault exception: [wsdl] soap-error: parsing wsdl: couldn't load ' http://www.xyz.com/abc/wsdls/login.wsdl ' : failed load external entity if copy url error message , paste in browser(with same proxy settings) works. 2nd scenario is, if pass values instead of variables giving me diffarant response $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' ...
Read more

java - More than one row with the given identifier was found: 1, for class: com.model.Diagnosis -

below model, service implementation , error trace of code. model class: @entity @table(name = "ph_diagnosis_history") @jsonidentityinfo(generator = objectidgenerators.propertygenerator.class, property = "id",scope=diagnosis.class) public class diagnosis extends abstractentity { @column(name = "diagnosis_notes", length=255) @length(max = 255, message = iprprop.max_len_255_msg) private string diagnosisnote; @enumerated(enumtype.string) private diagnosistypeenum type; @temporal(temporaltype.date) @column(name = "diagnosis_date") @jsonserialize(using = jsondateserializer.class) private date diagnosisdate; @manytoone @joincolumn(name = "patient_chart_id") private patientchart patientchart; public string getdiagnosisnote() { return diagnosisnote; } public void setdiagnosisnote(string diagnosisnote) { this.diagnosisnote = diagnosisnote; } public d...
Read more