31 replies [Last post]
DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

}:) I have a fieldset. Within that fieldset, there is a listbox that gets dynamically displayed and depending on what the user selects can range in width.

how can I dynamically resize the fieldset around that listbox so that the listbox does not display outside of the fieldset border?

Triumph (not verified)
Anonymous's picture
Guru

Not enough information for a

Not enough information for a meaningful response.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

Code below. it's .net (which

Code below. it's .net (which should not matter).

the shufflebox is set to invisible when the page loads initially and is changed when the user clicks something. The issue is that the initial state of the page is a simple dropdown/select box. I could make the fieldset like 425px wide to compensate for the widest listbox that may be displayed but it looks like crap with all of the white space to the right of the dropdown box. So I want to "dynamically" resize the fieldset to the width of the listbox after it loads. Make sense?

<fieldset>
  <p>Add Users to a Group</p><br />
  <label>Work Group</label>
  <SmartDropdown ID="ddlGroupAddUsers" runat="server" IsRequired="true" CustomErrorMessage="Please supply a group." AutoPostBack="true"></FISDesktop:SmartDropdown>
  <asp:Panel ID="trUserList" runat="server" <span style="font-weight:bold">Visible="false"</span>>
  <div style="width:430px;">
  <uc3:ShuffleBox ID="ucShuffleBox" runat="server" Width="200px" />
  <hr />
  <div class="ActionBTN">
  <BusyButton ID="btnCancelUsers" runat="server" Text="Cancel" OnClick="btnCancelUsers_Click" />
  <BusyButton ID="btnAssignUsers" runat="server" Text="Save" OnClick="btnAssignUsers_Click" />
  </div>
</div>
</asp:Panel>
</fieldset>

Triumph (not verified)
Anonymous's picture
Guru

It doesn't matter that it is

It doesn't matter that it is ASP.NET but please post the rendered markup.

Just wondering, why use the Panel? It seems extraneous. You can put the runat="server" and visible="false" on the surronding div or even on the shufflebox. Correct? No point in making it more complex.

It may be a case for jQuery, not sure. I don't know if min-width would expand according to the content or not. Maybe.

Hmm, wait, wait! Try making the fieldset display: table-cell; that may work. Maybe

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

nope, no luck man

neither worked . . . still the same result.

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:neither

DanalyDesign wrote:

neither worked . . . still the same result.

jQuery didn't work?

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

Triumph wrote:DanalyDesign

Triumph wrote:
DanalyDesign wrote:

neither worked . . . still the same result.

jQuery didn't work?

Hadn't tried it yet.

Triumph (not verified)
Anonymous's picture
Guru

Bah!

It sounds like a terrible idea anyway. jQuery will work though. As long as the end user has javascript turned on. Ever since I was introduced to jQuery I've run my browsers with it on all the time. I'm a believer. Tongue

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

honestly . . .

I wouldn't know where to start with jQuery for this . . .

Triumph (not verified)
Anonymous's picture
Guru

There's got to be a better

There's got to be a better solution anyway. Can you provide a link?

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

it's on an intrnet site.

I'm in the corporate world. I viewed the source of the rendered page but it's just a bunch of encrypted junk. Not trying to be difficult Smile just have the site locked down. Actually the site is all tables right now and works fine . . . my duty is to make the site fluid with css only.

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:... I

DanalyDesign wrote:

... I viewed the source of the rendered page but it's just a bunch of encrypted junk.

That's just the Viewstate. The rest of the code should be fine. Of course in this case posting the code may not help as I don't have your custom server controls available. I'd have to see it the way you see it.

Hmm. Let me think about this.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

<%@ Page Language="VB"

<%@ Page Language="VB" MasterPageFile="~/FISDesktopMaster.master" AutoEventWireup="false"
    CodeFile="ProcessAdmin_WorkgroupUsers.aspx.vb" Inherits="ProcessAdmin_WorkgroupUsers"
    Title="Untitled Page" %>
<%@ Register Src="controls/Admin/AdminConfirm.ascx" TagName="AdminConfirm" TagPrefix="uc4" %>
<%@ Register Src="controls/ShuffleBox.ascx" TagName="ShuffleBox" TagPrefix="uc3" %>
<%@ Register Src="controls/Admin/AdminBackToLink.ascx" TagName="AdminBackToLink" TagPrefix="uc2" %>
<%@ MasterType TypeName="FISDesktopMaster" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="contentPlaceHolderMain" runat="Server">
  <uc2:AdminBackToLink ID="AdminBackToLink1" runat="server" NavigateUrl="~/ProcessMgmtAdmin.aspx" Text="Back to Process Admin" />
  <AJAX:UpdatePanel ID="update" runat="server">
    <ContentTemplate>
      <asp:Panel ID="pnlInstructions" runat="server" Visible="false">
        <div style="padding-bottom:15px;">Create New Work Groups or Manage Existing Ones:</div>
            <div> <img src="images/goTo.gif" style="width: 16px;" alt="" />
                  <FISDesktop:LinkButton ID="lnkAddUsersToGroup" runat="server" OnClick="lnkAddUsersToGroup_Click">Add Users to Group</FISDesktop:LinkButton>
                  &nbsp;|
                  <FISDesktop:LinkButton ID="lnkAddGroupsToUser" runat="server" OnClick="lnkAddGroupsToUser_Click">Add Groups to User</FISDesktop:LinkButton>
            </div>
      </asp:Panel>
      <asp:Panel ID="pnlAddUsers" runat="server">
        <div style="padding-bottom:15px;">To add Users to a Work Group, complete the form, and click <span class="blackBold8">Save:</span></div>
            <fieldset style="width:285px;">
              <p>Add Users to a Group</p><br />
                  <label>Work Group</label>
                      <FISDesktop:SmartDropdown ID="ddlGroupAddUsers" runat="server" IsRequired="true" CustomErrorMessage="Please supply a group." AutoPostBack="true"></FISDesktop:SmartDropdown>
                          <asp:Panel ID="trUserList" runat="server" Visible="false">
                            <div style="width:430px;">
                            <uc3:ShuffleBox ID="ucShuffleBox" runat="server" Width="200px" />
                            <hr />
                            <div class="ActionBTN">
                                  <FISDesktop:BusyButton ID="btnCancelUsers" runat="server" Text="Cancel" OnClick="btnCancelUsers_Click" />
                                  <FISDesktop:BusyButton ID="btnAssignUsers" runat="server" Text="Save" OnClick="btnAssignUsers_Click" />
                            </div>
                        </div>
              </asp:Panel>
            </fieldset>
      </asp:Panel>
      <asp:Panel ID="pnlAddGroupsToUser" runat="server" Visible="False">
        <div style="padding-bottom:15px;">To add Work Groups to a User, complete the form, and click <span class="blackBold8">Save:</span></div>
            <fieldset style="width:230px;">
              <p>Add Groups to a User</p><br />
              <label>User</label>
                    <FISDesktop:SmartDropdown ID="ddlUser" runat="server" IsRequired="true" CustomErrorMessage="Please supply a user." AutoPostBack="true"></FISDesktop:SmartDropdown>
                        <asp:Panel ID="trGroupList" runat="server" Visible="false">
                            <br />
                                <uc3:ShuffleBox ID="ucShuffleBox2" runat="server" Width="200px" />
                                <br />
                                <div class="ActionBTN">
                                      <FISDesktop:BusyButton ID="btnCancelGroups" runat="server" Text="Cancel" OnClick="btnCancelGroups_Click" />
                                      <FISDesktop:BusyButton ID="btnAssignGroups" runat="server" Text="Save" OnClick="btnAssignGroups_Click" />
                                </div>
                      </asp:Panel>
            </fieldset>
      </asp:Panel>
      <uc4:AdminConfirm ID="ucAdminConfirm" runat="server" />
    </ContentTemplate>
  </AJAX:UpdatePanel>
</asp:Content>

Triumph (not verified)
Anonymous's picture
Guru

Hmm. How about on the click

Hmm. How about on the click event that changes the visibility you define the text of an to include one line of CSS in the head to change the width of the fieldset to the necessary width?

Or maybe add runat="server" to the fieldset itself and then programmatically add a style attribute with the appropriate "width: ***px;"

What do you think?

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

interesting thought . . .

interesting thought . . .

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign

DanalyDesign wrote:

interesting thought . . .

Added another above.

The inline styling in the second idea may sound taboo but I'd vote that it is fine in this case as long as your not peppering your code with them. That way you won't have to manipulate the master page from the content page.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

fieldset { position:

fieldset 
{
position: relative;
border: 1px solid #0E5AA6;
background-color: #fff;
padding: 15px;
}

see, I don't specify a width in the CSS. I do it on the actual fieldset tag (style="width:250px") because they're all over the place and need to be different widths. So if the fieldset tag already has a width set to it for the initial state, I'm not sure you can change that after the listbox is displayed

Triumph (not verified)
Anonymous's picture
Guru

This works:

This works:
html

	<fieldset style="width:200px;" id="theFieldset" runat="server">
		<asp:dropdownlist runat="server" id="ddl_numberOne" autopostback="True">
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
			<asp:listitem>kljsdf jkl jkljaskld jkljklfj lkasjflk jasdlfkjdasljfalskdjfklajskldfjklasjdflkjasldkf </asp:listitem>
		</asp:dropdownlist>
	</fieldset>

C#
		if (IsPostBack)
		{
			theFieldset.Attributes.Clear();
			theFieldset.Attributes.Add("style", "width: 500px;");
		}

I made a dropdown set to autopostback. The original has inline styling: width: 200px;

after postback width is 500px. Instead of postback use your click event that makes the dropdown visible.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

Could I use the c# code like

Could I use the c# code like javascript on the page or would I need to put it in the code behind?

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:Could I

DanalyDesign wrote:

Could I use the c# code like javascript on the page or would I need to put it in the code behind?

Attributes.Clear and Attributes.Add are in the System.Web.UI (or something like that) namespace. You can use them in your VB codebehind.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

So I would add: Imports

So I would add:
Imports System.Web.UI
to the top of my VB file and then what? I'm not a programmer Sad

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:... and

DanalyDesign wrote:

... and then what? ...

Hire a programmer. Tongue

What are you using to edit the files? It must be in a different namespace. It seems to work with just the System namespace.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

vs 2005

vs 2005

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:vs

DanalyDesign wrote:

vs 2005

Does it tell you if you don't have a reference to the correct namespace? VS2008 does.

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

I'm just not familiar with

I'm just not familiar with the VB file whatsoever. not even sure where to put this code or what else needs to go with it. :scared:

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:I'm just

DanalyDesign wrote:

I'm just not familiar with the VB file whatsoever. not even sure where to put this code or what else needs to go with it. :scared:

Why not put something like this in the CSS:select {width: 120px;}

Bah, maybe that's not such a great idea either. Can't read longer lines when they are selected. Sad

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

I've

I've tried:

input[type=select] 
{
    display: none; 
    visibility:hidden;
}

and the way you just listed with no luck.

Triumph (not verified)
Anonymous's picture
Guru

ASP.NET serves

ASP.NET serves as not , doesn't it?

DanalyDesign
Offline
Regular
Florida
Last seen: 11 years 30 weeks ago
Florida
Timezone: GMT-5
Joined: 2009-01-08
Posts: 16
Points: 0

Triumph wrote:ASP.NET serves

Triumph wrote:

ASP.NET serves as not , doesn't it?

correct!

Triumph (not verified)
Anonymous's picture
Guru

DanalyDesign wrote:Triumph

DanalyDesign wrote:
Triumph wrote:

ASP.NET serves as not , doesn't it?

correct!

select {} should work then. input[type="select"] will not.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Not your everyday element

FYI. The select element, or at least the option elements, are windowed objects. They are drawn by the OS, and are not a part of the page. If this were not so, the drop-down menu would push everything in its way down. Instead, it lies over everything else. It will even extend beyond the browser window, onto the desktop if necessary. This is a requisite behavior.

side note: what is ? An asp thing?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Triumph (not verified)
Anonymous's picture
Guru

gary.turner wrote:... side

gary.turner wrote:

... side note: what is ? An asp thing? ...

No, it doesn't exist.