simple question about placing controls beside each other 2

[jcaulder]

I know this is ridiculously simple but it is not obvious to me. I have several controls on a asp page. I want to place controls beside each other but it always goes up under the control when I drag it to the design window.

For example, I have a detailView all the way to the left of my form. I want to put an image control to the right of the detailView. Every time I drag the control to the designer, it appears it will be placed correctly beside the detailView but when I let go, it drops below it. Do I have to put these in a table or manually change the code to get the layout I want?? Surely not.

What's the secret?? Is there some formatting option I can disable that will allow free placement?

TIA

 

[jcaulder]

Forgot to mention I'm using Visual Web Developer 2008 Express Edition but I think I've had the same problem in VS2005.

It appears to depend upon the control. I can easily place a label beside a textbox visually. It's the more complex controls that appear to prevent it(gridview/detailview/panel/etc.).

 

[tperri]

can you go into the HTML view and take out the <br/> it automatically inserts?

 

[ca8msm]

You will need to read up on HTML and CSS to find out how browsers render the HTML you send them. In this case, if the objects you are inserting are block level elements, you will either need to float them or set their display to inline.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[dbsquared]

When you run the webpage does it render correctly?
If it does then you are seeing what I consider a small design flaw within the visual studio environment. it is just a visual effect of the designer. You can force it to layout correctly using tables (I do) but you don't have too if you don't want to. You can also try what ca8msm recommended above also to see which you prefer.

This effect gets worse when you use master pages. You can make a master page so badly that it is hard to work with, I've had these before (I didn't design the page) not much fun to do.

To go where no programmer has gone before.

 

[jcaulder]

Thanks for the replies.

It is at design and render time that I have the problem. It is not just a browser problem, it is the VS designer that ignores selected placement of controls. I know I could manually modify the code to get the design I want but that seemed time consuming, both now and from a maintenance standpoint. I thought I was just missing something.

I guess I am too used to designing desktop applications where things actually stay where you drop them.

I am using a master page and have noticed similar problems there also. As mentioned, for the most part, things go pretty well. It's just some of the controls appear to have an inherent line break.

Guess I will try tables. That seems like the answer but I'm a little worried that a table beside a table will exhibit the same behavior as a detailView beside an image.

Perhaps there is no answer except manually modifying the code as proposed above. I was hoping there was another way.



Thx guys!

J

 

[jcaulder]

Let me ask this another way, just as a straight design question.

If you were designing a asp page in VS and the design requirements were:

1)detailView to the far left of the asp form showing record details(for example product details)
2)an image to the immediate right of the detailView related to the record being viewed(for example a photo of the product)

What controls would you use to accomplish this using the designer?

The options appear to be:

1)You don't do this in the designer alone, you get it close then change the code manually
2)You use a 1 row, 2 cell table and put the detailView in one cell and the image control in the other cell.

 

[ca8msm]

Guess I will try tables. That seems like the answer

Nope, tables are definitely not the answer. Tables are for displaying tabular data, not for laying out a page. To layout your page you will need to do what I said above - learn HTML/CSS and for this particular case the float method.

the VS designer that ignores selected placement of controls

Ignore the design view in Visual Studio. It has absolutely no bearing on how users will see your site so there's little point in relying on it. Instead, view your page in a few different browsers (i.e. IE7, IE6, Firefox, Safari, Opera) and make sure that your CSS renders the page to the layout you want.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jcaulder]

Following your suggestion with floating, I've tried many different combinations to try to force an image to float to the right of a calendar. The combination I finally found that worked was:

<div style ="float:none">
<asp:Calendar ID="Calendar1" runat="server" style="float:left"></asp:Calendar>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Image/FHIBLA.jpg" style="float:left"/>
</div>

I am not sure if this is correct but it was the only thing that seemed to work. I also came across numerous articles, some saying tables are the correct approach with others saying CSS. In either case, it appears there is no quick, easy VS designer approach to achieve this. From my perspective at this time, it seems styles are the more logical choice for addressing and encapsulating presentation logic similar to this but a table would have been much quicker to solve the immediate problem. Through your recommendations, I have learned quite a bit about CSS which I think will be invaluable going forward. While I knew generally what CSS was, I never knew so much could be accomplished with it. I feel CSS will actually prove to be the solution for another problem I was working on.

Thanks again!

J

 

[ca8msm]

I also came across numerous articles, some saying tables are the correct approach with others saying CSS

Those articles are probably outdated articles that used to be correct but now are since considered old and very much less efficient/maintainable. CSS can sometimes be fairly tricky to understand, but you have this understanding you will realise why it is a better solution.

The approach you have used above is quite correct but I'd consider moving the actual CSS out to a seperate stylesheet rather than having an inline style. This will make your page easier to maintain and also slightly faster on subsequent visits as the stylesheet will be cached.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jcaulder]

After playing around with this a few more minutes, I discovered what I was looking for in VS designer. I noticed that when I set the style property manually in code, the design view actually correctly rendered the page showing the image to the right of the calendar. So I figured there must be some way to do this within the designer.

Turns out, if you simply right click one of the components and choose 'Style-->Layout-->Flow Control", you can set this and a plethora of other properties.

Just thought I would post that in case someone else stumbles upon this same problem. Once I knew what to look for(Styles), it wasn't too hard to find.

Based upon my understanding, I would agree that it should be separated out into a css file. I guess I can now use the VS designer to build the style properties I want then use the code generated as a template to build a separate css file to link to the page, at least until CSS becomes more familiar to me.

Now that I have a more full understanding of styles and how VS supports them, I still return to my original question which I think is a bug in the VS designer. If I try to drag an image to the immediate right of the calendar, it seems to me VS should switch the flow control to accommodate this. Perhaps there is still some option in VS that has this locked in my environment thereby preventing it.

My problem is solved so on to the next one.

Thx

J