I have a strange issue when adding items to a listbox. I want it to adjust it's size to match it's count. When adding 1 all is fine, add the second and the rows go to 4 then after we have more than 4 all is working fine. The other thing is the location of the top of the listbox also moves up a few pixels - wierd. Is this a bug? This is the button event code for adding them. Updated!
Dim s As String = tbTest.Text
If Not s = "" Then
Dim li As New ListItem(s)
If Not lsbTest.Items.Contains(li) Then
lsbTest.Items.Add(li)
Dim i As Integer = lsbTest.Items.Count
lsbTest.Rows = i
lsbTest.Height = i * 22
End If
End If
Don't use Rows property. Let it stretch by setting the CSS height to 100% of a containing div.
UPDATE:
Take a look at this solution (Googled it):
Allowing listbox to grow vertically....
Related
I am new to .NET. I am converting an existing HTML and asp.net website into responsive. I converted an ASP DataGrid into responsive using the no more tables approach and it is working perfectly except that column headers are overlapped. The DataGrid columns are elements like:
<asp:BoundColumn DataField="M_DATENAME" HeaderText="Day"></asp:BoundColumn>
and some of these columns contain <span> elements, therefore in the small screen sizes when the headers are added before td(s), these columns get overlapped.
So I tried two ways:
As per the Udemy course using data-title or data-th attribute:
no-more-tables td:before { content: attr(data-title); }
However, the problem is that asp BoundColumn has no attribute called data-title or data-th
Second way is adding headers manually based on the example -> problem with it: Some of the columns are set to be Invisible and visible in certain conditions only. So at some point these headers text get overlapped.
So what could be the solution to my problem?
Or how can I add the BoundColumn HeaderText as a value of the content css property instead of the data-title or data-th.
I found a solution for the problem. Actually the problem was caused from the DataGrid columns that have null values (empty), therefore these cells were not displaying while the headers were displaying and thus overlapping with next cells. I did the following to achieve that:
1) I added <ItemStyle CssClass="headerStyle5"/> for each BoundColumn and TemplateColumn
2) Then in the CSS, instead of adding titles with absolute column position, I referenced columns using the headerStyle name I added in step 1 as the following:
#no-more-tables td[class="headerStyle1"]:before { content: "Date"; }
#no-more-tables td[class="headerStyle2"]:before { content: "Day"; }
#no-more-tables td[class="headerStyle10"]:before { content: "Remarks"; }
3) in the VB.NET, I wrote below code to loop through all empty cells and add a label with just space which will case the cell to show
Dim i As Integer
For i = 0 To DataGrid1.Columns.Count - 1
If e.Item.Cells(i).Text.Trim Is Nothing Or e.Item.Cells(i).Text.Trim = "" Then
Dim sosoLabel As New Label
sosoLabel.Text = "<label> </label>"
e.Item.Cells(i).Controls.Add(sosoLabel)
End If
Next
and now it is working perfectly :)
I am using jQgrid version 4.6.0 (Free version) and trying to edit the height of textbox which gets rendered when we set editable: true in Column model. I want the textbox height to fit into complete grid cell.
Here the width of rendered textbox is fine and fits in the cell but how can I increase the height of textbox?
Trying to achieve:-
There are some trick which you can use. You can editoptions in the column defined something like
editoptions: { style: "height:40px;" }
It will set style attribute on the textbox creating during editing. I think that the trick will work for any editing mode which you will use.
UPDATED: One can do the following in case of usage cell editing:
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
var tr = this.rows[iRow], h = $(tr).height(),
$input = $(tr.cells[iCol]).find("input"),
delta = $input.outerHeight() - $input.height();
$input.height(h - delta);
}
Inside of the most callbacks this will be initialized to the DOM of the <table> element (see here), which supports rows property to quick access to the row by rowIndex and the row (<tr>) supports cells array which can be used to get the cell by cell index. The rest of the code should be clear I hope.
Is there a way to get the width property of controls in code behind? I need to add dynamic controls to panels and make the width 20px less then the panel. So I am trying to do this in Page_Load event but the width property is not an integer or string.
The Width poperty is of type Unit. You can set the value programmatically using something like:
yourControl.Width=new Unit("20 px");
See here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.unit.aspx
Double myPanelWidth = myControlPanel.Width.Value;
That will give you a the width as a double.
Then you could do this:
myControl.Width.Value = myPanelWidth - 20;
Here is a simple way to set the width through code as you explained but also accounting for unit type:
Dim dblTargetWidth As Double = pnlMyPanel.Width.Value - 20
ctrlMyControl.Width = New Unit(dblTargetWidth, pnlMyPanel.Width.Type)
I have a DataGrid in my project. It doesn't fit's the width of the form, so the scrollBar appears. The DataGrid, on it's initial state, displays a few columns and a part of the next column (which would appear after scrolling).
Is there any way, I can get the width of this, displaying part?
You should get the width of the parent object.
let's say the datagrid is in your application, then you should get the width of the stage.(stage.stageWidth)
If your datagrid is on a certain x location in your application (or any other parent object) then you should take the width of the parent object - the x value of your datagrid. (stage.stageWidth - dataGrid.x)
Ok, I had some time to dig more deeply in this problem. I've searched a few classes to see, how the Adobe was implementing those grid behavior (displaying columns partly). So, for those, who'll need to deal with this, the needed part is in DataGrid.as file, method configureScrollBars .. actually, this part of it:
// if the last column is visible and partially offscreen (but it isn't the only
// column) then adjust the column count so we can scroll to see it
if (collectionHasRows && rowCount > 0 && colCount > 1 &&
listItems[0][colCount - 1].x +
visibleColumns[colCount - 1].width > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
else if (colCount > 1 && !collectionHasRows)
{
// the slower computation requires adding up the previous columns
var colX:int = 0;
for (var i:int = 0; i < visibleColumns.length; i++)
{
colX += visibleColumns[i].width;
}
if (colX > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
}
That's pretty much all code, that needed to catch and measure all those tricky divided cols in a grid :)
In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.