CODEWITHSUNDEEP
asp.nethtml
Sarah
Sarah

Reputation: 2903

How to have a textbox with title above?

I am trying to create a bunch of text boxes with their title above the text boxes and format them so there are several textboxes in a line.

This is what I want:

page layout

The problem I'm having is when I try to write the CSS to allow me to do this, the text boxes overlap.

I am using a custom Asp.Net Master Page in Visual Studio that was created by my employer and I'm having a hard time trying to make this happen.

Here is my code:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages/Intranet/Intranet.2Columns.Master"
CodeBehind="AddNewApplication.aspx.vb" Inherits="...AddNewApplication" %>

<asp:Content ID="Content1" ContentPlaceHolderID="headmeta" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headCustomScriptsCSS" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpMainContent" runat="server">
    <h1>
        Add a New Application</h1>
    <h3>
        General Description</h3>
    <form>
    <div class="group1">
        <label for="EnglishShortName">
            English Short Name</label>
        <br />
        <input type="text" name="EnglishShortName" />
    </div>
    <div class="group1">
        <label for="FrenchShortName">
            French Short Name</label><br />
        <input type="text" name="FrenchShortName" />
    </div>
    <div class="group1">
         <label for="ApplicationCode">
             Application Code</label><br />
        <input type="text" name="ApplicationCode" /><br />
    </div>
    <div class="EnglishLN">
        <label for="EnglishLongName">
            English Long Name</label><br />
        <input type="text" name="EnglishLongName" /></div>
    <div class="EnglishLN">
        <label for="SecureChannel">
            Secure Channel</label><br />
        <select name="SecureChannel" class="inline">
             <option value="No">No</option>
            <option value="Yes">Yes</option>
        </select>
     </div>
</asp:Content>

And my CSS:

.group
{
    display:inline-block;
}
.EnglishLN
{
    display:inline-block;
    margin-right:5px;
}

Any ideas?

Thanks!

Upvotes: 0

Views: 2103

Answers (3)

rickkr
rickkr

Reputation: 144

Have you tried setting the size of your div tags? Something like:

.group
{
    display:inline-block;
    width:200px;
    height:200px;
}
.EnglishLN
{
    display:inline-block;
    margin-right:5px;
    width:200px;
    height:200px;
}

Then if you want to your inputs to be longer/shorter just play around with their "size" attributes.

Upvotes: 0

chillfire
chillfire

Reputation: 406

It might be a bit of overkill, but I couldn't resist removing your inline css and adding a few helper CSS styles. I prefer 'float' over 'inline-block' but they can be a pain to use if you haven't used them before.

This http://jsfiddle.net/chillfire/QYSQ8/ should work, however it is not responsive. My CSS;


.fl{
   float:left;    
}
.fullwidth{
    width:80%;
}
.split30
{
   width:30%;
}
.split60
{
   width:60%;
}
.EnglishLN
{
   margin-right:5px;
}
.boxPad{
    margin:10px 0 10px 0;
}

Using a combo of the above you can float/pad your way around.

If you are going to build a data entry form, have you considered using a table? Tables still work for tabular data and can be easier to manage forms with.

If you are building anything that needs to work nicely across browsers and don't enjoy hand coding CSS or using tables then you should have a look at something like bootstrap or Zurb foundation (there are other CSS UI frameworks out there too)

cheers

Upvotes: 0

Sam
Sam

Reputation: 926

I think the problem you are having is that the labels inside your div.group1's and div.EnglishLN's are by default displaying as blocks meaning they expand to fill all horizontal space. Try setting the labels to display: inline; like so:

.group1
{
    display: inline-block;
}
.EnglishLN
{
    display: inline-block;
    margin-right: 5px;
}
.group1 label, .EnglishLN label
{
    display: inline;
}

Edit: I just noticed a error in both our css where the.group selector should be .group1

Edit2: It seems to work in this fiddle http://jsfiddle.net/kmxF5/

Upvotes: 1

Related Questions