Opened 13 years ago

Closed 13 years ago

Last modified 10 years ago

#5616 closed bug (notabug)

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>

Change History (2)

comment:1 Changed 13 years ago by rdworth

Resolution: → invalid
Status: new → closed

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?
  2. 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)
  3. 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
  4. 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.
  5. 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.

comment:2 Changed 10 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.