Skip to main content

Search and Top Navigation

#5616 closed bug (notabug)

Opened May 14, 2010 07:11PM UTC

Closed May 14, 2010 07:52PM UTC

Last modified October 11, 2012 09:15PM UTC

Add Button placement issue

Reported by: wasi2000 Owned by:
Priority: minor Milestone:
Component: ui.core Version: 1.8.1
Keywords: Cc:
Blocked by: Blocking:
Description

This works fine in Mozilla. In IE, if you place the button in the <ul> then it will be attached with the last list item. As my tabs are moveable so whenever I move my last tab this add button is also joining the tab.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TabStrip._Default" %>

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

<link type="text/css" href="jquery-ui-1.8.1.custom.css" rel="stylesheet" />

<link type="text/css" href="menu.css" media="screen" rel="stylesheet" />

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>

<script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="menu.js"></script>

<script type="text/javascript">

$(function() {

$('.edit').editable(function(value, settings) {

return (value);

}, {

type: 'text',

event: 'dblclick'

});

$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' });

addTab button: just opens the dialog

$('#add_tab').button().click(function() { });

$('#add_tab').button();

// tabs init with a custom tab template and an "add" callback filling in the content

var $tabs = $('#tabs').tabs({

tabTemplate: '<li><a href="#{href}">#{label}</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>'

});

close icon: removing the tab on click

note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924

$('#tabs span.ui-icon-close').live('click', function() {

var index = $('li', $tabs).index($(this).parent());

$tabs.tabs('remove', index);

});

MENUS

$('#flat').menu({

content: $('#search-engines').html(), grab content from this page

showSpeed: 400

});

$('#tabs span.ui-icon-triangle-1-s').live('click', function() {

var index = $('li', $tabs).index(this);

var index = $('span', $tabs).index(this);

$($('span').get(index)).menu({

content: $($('span').get(index)).next().html(), grab content from this page

showSpeed: 400

});

});

});

</script>

<!-- styles for this example page only -->

<style type="text/css">

body { font-size:62.5%; margin:0; padding:0; }

#menuLog { font-size:1.4em; margin:20px; }

.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fg-button {cursor:pointer;}

</style>

</head>

<body>

<form id="form1" runat="server">

<div id="tabs">

<ul>

<li><span class="ui-icon ui-icon-locked" style="float:left;"></span>

<a class="edit" href="#tabs-1">Tab1</a>

<span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span>

<div class="hidden">

<ul>

<li><a href="#">Google</a></li>

<li><a href="#">Yahoo</a></li>

<li><a href="#">MSN</a></li>

</ul>

</div>

<span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>

</li>

<li><span class="ui-icon ui-icon-locked" style="float:left;"></span>

<a class="edit" href="#tabs-2">Tab2</a>

<span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span>

<div class="hidden">

<ul>

<li><a href="#">Ask</a></li>

<li><a href="#">AOL</a></li>

</ul>

</div>

<span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>

</li>

<li style="{overflow:auto}"><span class="ui-icon ui-icon-locked" style="float:left;"></span>

<a class="edit" href="#tabs-3">Tab3</a>

<span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span>

<div class="hidden">

<ul>

<li><a href="#">Google</a></li>

<li><a href="#">Yahoo</a></li>

</ul>

</div>

<span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>

</li>

<button id="add_tab">Add Tab</button>

</ul>

<div class="right"></div>

<div id="tabs-1">

<p>Tab-1 Contents</p>

</div>

<div id="tabs-2">

<p>Tab-2 Contents</p>

</div>

<div id="tabs-3">

<p>Tab-3 Contents 1</p>

<p>Tab-3 Contents 1</p>

</div>

</div>

</form>

</body>

</html>

Attachments (0)
Change History (2)

Changed May 14, 2010 07:52PM UTC by rdworth comment:1

resolution: → invalid
status: newclosed

This ticket is not valid. In general, please see http://wiki.jqueryui.com/Bug-Fixing-Guide . More specifically:

1. The ticket summary mentions only button and doesn't summarize what the issue is, only that it has something to do with 'adding' and 'placement'. What are you adding it to? Where is it being placed?

1. The description should contain:

  • what you have and what are you're trying to do with it
  • the minimal steps required to reproduce the issue
  • the expected behavior when you follow those steps (what you wish would happen)
  • the actual behavior when you follow those steps (what's happening instead)

1. The description should not contain any more than a few lines of code. If you have too much code to fit in the description, use an attachment

1. Ensure you have a minimal test case. Your current code sample contains at least:

  • editable
  • buttons
  • tabs
  • menu
  • live

Is every one of these required to produce this button issue you've found? If not, remove the code that isn't needed.

1. The component field should be filled with the component that you believe contains the bug, not ui.core

Feel free to fix up the ticket according to these suggestions and reopen. If you're not sure what you have is in fact or bug or if perhaps your code needs some kind of tweak, please start on the forum instead, but you still should have a minimal test case before posting there.

Thanks.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted