Solved

Setting textbox size in a gridview

Posted on 2016-11-02
12
24 Views
Last Modified: 2016-11-08
Hi,
I have a gridview with 3 columns.
The first column has a textbox, the 2nd a checkbox and the 3rd an image button.
I have set the size of :
- The Gridview to be 99% of form,
- The 1st column to be 70% of the gridview
- The textbox to be 100% of the column

However, I cannot manage to set the size of the textbox to use 100% of the 1st column.
No matter what I try, % of px, the maximum size does not change.


Could you please help.

I have also added an image on how it looks with the code below

Anne Rowe

This is the code:

    <asp:GridView ID="GV" runat="server" AutoGenerateColumns="false" 
        ShowFooter="False" DataKeyNames="QID, FQID" SelectedIndex="0" Width="99%" OnRowDataBound="GV_RowDataBound">
        <Columns>
            <asp:TemplateField Visible="true" HeaderText="Description" ItemStyle-VerticalAlign="Top" HeaderStyle-Width="70%" ItemStyle-Width="70%" HeaderStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuestionDesc" Text='<%# Eval("QuestionDesc") %>' runat="Server" Style="Width:100%; Height:20px"  />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField Visible="true" HeaderText="Correct answer" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                     <asp:CheckBox ID="ckIsAnswer" runat="server" CssClass="exclusive" data-linked="group3" Checked='<%# Bind("IsAnswer") %>'/>
                    <asp:Label ID="lblIsAnswer" Text='<%# Eval("IsAnswer") %>' runat="Server" Visible="False" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField Visible="true" HeaderText="Remove" HeaderStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:ImageButton ID="btnDelete" runat="server" AlternateText="Delete" TabIndex="-1"
                        ImageUrl="~/App_Themes/Default/Images/Buttons/Remove.png" ImageAlign="middle" CssClass="imagebutton"
                        CommandName="DeleteSubQuestion" CommandArgument='<%# Eval("QID") %>' OnCommand="Delete_RowCommand"
                        Visible='<%# Boolean.Parse(Eval("IsDelete").ToString()) %>' Enabled='<%# Boolean.Parse(Eval("IsEnabled").ToString()) %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Open in new window

Texbox-in-a-Gridview.PNG
0
Comment
Question by:AnneSKS
  • 6
  • 3
  • 3
12 Comments
 
LVL 18

Expert Comment

by:Pawan Kumar Khowal
ID: 41871496
Try..I think you need to firs the Set the width of the column.

<asp:TemplateField HeaderText="Pawan" ItemStyle-Width="100px">                    
                    <EditItemTemplate>
                        <asp:TextBox ID="txtid" runat="server" Text='<%#Eval("Pawan") %>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemStyle Width="100px" />
</asp:TemplateField>
0
 
LVL 39

Expert Comment

by:Kyle Abrahams
ID: 41871505
Remove the itemstyle width . . . just use the header style.
0
 

Author Comment

by:AnneSKS
ID: 41871520
Kyle & Pawan,
I've tried both solutions, none of them made resized the width of the textbox.
0
 
LVL 18

Expert Comment

by:Pawan Kumar Khowal
ID: 41871530
Try this

<asp:TemplateField HeaderText="Pawan" ItemStyle-Width="100px">                    
                    <EditItemTemplate>
                        <asp:TextBox ID="txtid" runat="server" Text='<%#Eval("Pawan") %>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <Itemstyle Width="100px" />
                    <ControlStyle Width="100%" />

</asp:TemplateField>
0
 

Author Comment

by:AnneSKS
ID: 41871535
Hi Pawan,
Below is what I have tried, however it did not make any difference.


            <asp:TemplateField Visible="true" HeaderText="Description" ItemStyle-VerticalAlign="Top" HeaderStyle-Width="70%" HeaderStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuestionDesc" Text='<%# Eval("QuestionDesc") %>' runat="Server" Style="Width:100%; Height:20px"  CssClass="Label_100_Blue_QB" />
                    <asp:Label ID="lblQuestionDesc" Text='<%# Eval("QuestionDesc") %>' runat="Server" Visible="False" />
                </ItemTemplate>
                 <ControlStyle Width="100%" />
            </asp:TemplateField>

Open in new window

0
 
LVL 39

Expert Comment

by:Kyle Abrahams
ID: 41871537
Can you inspect it and post the raw html from your browseR?

What's in the css class Label_100_Blue_QB
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 18

Expert Comment

by:Pawan Kumar Khowal
ID: 41871558
Remove this class Label_100_Blue_QB .

Also try with both ..

 <Itemstyle Width="100px" />
<ControlStyle Width="100%" />
0
 

Author Comment

by:AnneSKS
ID: 41871644
Pawan,
I have removed the class Label_100_Blue_QB
And added both
 <Itemstyle Width="100px" />
<ControlStyle Width="100%" />
 
And it did not change anything
0
 

Author Comment

by:AnneSKS
ID: 41871646
Kyle,
Attached is the raw html for the full page. SO a lot more information than what I posted above.
I have removed in the sample above what was not relevant for this exercise.
Texbox-in-a-Gridview.txt
0
 
LVL 39

Expert Comment

by:Kyle Abrahams
ID: 41873197
Where is it getting the height:15px from?  Setting the width to 70% there will do the trick in terms of the column with (or in the TH section).

<td style="height:15px;">

also Label_100_Blue_QB appears to be in a separate style sheet . . . can you post the CSS definition for that?

Can you also post your full gridview or radgrid (EG: I see your hidden column in the data but not in your code).

Thanks.
0
 

Accepted Solution

by:
AnneSKS earned 0 total points
ID: 41873393
I found the solution:
It looks like setting up the width of a textbox using Width property and a % is not working, and not only in a gridview.
The way to do it is to use the min-width:

 <asp:TextBox ID="txtQuestionDesc" Text='<%# Eval("QuestionDesc") %>' runat="Server" Style="min-width:98%; height:20px" />

Open in new window


Thank you for your help.

Anne
0
 

Author Closing Comment

by:AnneSKS
ID: 41878489
The other solutions provided by the experts did not solve the problem and did not lead me to finding the solution
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now