Question

I have a page with 3 radio button lists and a jqueryUI “button” for choosing a report.

However, the “button” doesn’t appear in the correct place the first time it is .show()n and I can’t work out why.

The second/subsequent calls to show() move the button to its correct location.
Removing display: from the css for the button puts it in the correct place from the start, so I don’t know why it then appears in the wrong place?

Apologies for the mass of code – I have put everything into one view for demonstration:

<style type="text/css">
    .fieldset_Rule
{
    display: inline;
    vertical-align:top;
}
.fieldset_Rule legend
{
    font-size: 1em;
}
.radio_Rule
{
    margin-right: 10px;
}
.fieldset_Accounts
{
    display: inline;
    vertical-align:top;
}
.fieldset_Accounts legend
{
    font-size: 1em;
}
.radio_Accounts
{
    margin-right: 10px;
}
.fieldset_Display
{
    display: inline;
    vertical-align:top;
}
.fieldset_Display legend
{
    font-size: 1em;
}
.radio_Display
{
    margin-right: 10px;
}
span#reportlink
{
    margin-top:10px;
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    cursor: default;
    position:absolute;
    display:inline;
    float:left;
}

span#reportlink span.ui-icon
{
    margin: -8px 5px 0 0;
    left: .2em;
    top: 50%;
    float: left;
    position: absolute;
}

span#reportlink:hover
{
    cursor: pointer;
    color: #0060a9;
}

div.reportloading
{
    padding: 10px;
    color: #002c5a;
    font-size: 1.5em;
}

span.reportloadingtext
{
    background-position: left center;
    background-image: url('ajax-loader.gif');
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
}
</style>
<script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.16.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
    /// <reference path="jquery-1.6.4-vsdoc.js" />
    var rule = '';
    var accounts = '';
    var display = '';
    var url = '';

    $(document).ready(function () {

        $('#reportlink').click(function () {
            $.blockUI({
                message: '<div class="reportloading"><span class="reportloadingtext">Loading Report...</span></div>'
            }
                );
            $(location).attr('href', url);
        });

        $('input[name="Rule"]').change(function () {
            rule = $(this).val();
            SetReportLink();
        });

        $('input[name="Accounts"]').change(function () {
            accounts = $(this).val();
            SetReportLink();
        });

        $('input[name="Display"]').change(function () {
            display = $(this).val();
            SetReportLink();
        });

        $('#reportlink').toggle();
    });

    function SetReportLink() {
        url = '/TestMvc/' + rule + '/report/' + accounts + "/" + display;
        if (rule != '' && accounts != '' && display != '') {
            $('#reportlink').show('fast');
            $('#reportlink').hover(
                    function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); }
                );
        }
    }
</script>
<h2>
    Please select one option from each of the following:
</h2>
<fieldset class="fieldset_Rule"><legend>Rule Type</legend>
<div class="radio_Rule"><input id="Rule_I" name="Rule" type="radio" value="I" /><label for="Rule_Irs">I</label></div>
<div class="radio_Rule"><input id="Rule_L" name="Rule" type="radio" value="L" /><label for="Rule_Liquid">L</label></div>
</fieldset>

<fieldset class="fieldset_Accounts"><legend>Accounts</legend>
<div class="radio_Accounts"><input id="Accounts_All" name="Accounts" type="radio" value="All" /><label for="Accounts_All">All</label></div>
<div class="radio_Accounts"><input id="Accounts_Local" name="Accounts" type="radio" value="Local" /><label for="Accounts_Local">Local</label></div>
</fieldset>

<fieldset class="fieldset_Display"><legend>Display As</legend>
<div class="radio_Display"><input id="Display_Equivalent" name="Display" type="radio" value="Equivalent" /><label for="Display_Equivalent">Equivalent</label></div>
<div class="radio_Display"><input id="Display_Natural" name="Display" type="radio" value="Natural" /><label for="Display_Natural">Natural</label></div>
</fieldset>

<span id="reportlink" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-search">
</span>Get Report</span>

Any assistance VERY gratefully received!

Answer 1

When you call show(), the display:block style is applied to that element. So if it’s an inline element, avoid using show() and do

$("selector").css('display','inline');