PDA

View Full Version : [CLOSED] can not change height for ext:ComboBox



Fahd
May 07, 2015, 8:19 PM
Hello,
Can you please show me how to change the height for this ComboBox control? I tried overriding the CSS by
#cmbCopyFrom .x-field .x-table-plain .x-form-item .x-form-type-text .x-field-default .x-border-box but it is not working. As you can see in my attached screenshot, the height is way too high and there is no need of the borders around the control. 23969

Below is my code:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExtForum.aspx.cs" Inherits="ClosingSchedules.TestPages.ExtForum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="../Styles/jquery-ui.css" />
<style type="text/css">
/* set main table */
table
{
width: 98%;
border-collapse: collapse;
border-bottom-width: thin;
border-top-width: thin;
background-color: #FFFFFF;
}

th
{
font-weight: bold;
color: #3E3E3B;
background-color: #D7E4F2;
border-top-color: #425AA7;
border: 1px solid #D0DEF0;
}


td
{
border: 1px solid #D0DEF0;
border-right-width: thin;
border-right-color: #D0DEF0;
border-bottom-width: thin;
border-bottom-color: #D0DEF0;
height: 60px;
color: #425AA7;
}


#cmbCopyFrom .x-field .x-table-plain .x-form-item .x-form-type-text .x-field-default .x-border-box
{
height: 20px;
border: 0px none;
}

/* set column width for Sunday's event boxes */
#tblHour
{
width: 50px;
}

#tblHour .cellHour
{
width: 50px;
}

.rowHour
{
border-style: none;
}

.cellHour
{
background-color: white;
font-weight: bold;
border-bottom-style: none;
border-top-style: none;
border-left-style: none;
border-right: 1px solid #D0DEF0;
width: 50px;
padding: 0px 0px 0px 0px;
text-align: center;
}

.cellEvent
{
font-weight: bold;
border-style: none;
border: 0px solid #D0DEF0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<center>
<ext:ComboBox ID="cmbCopyFrom" runat="server" DisplayField="EntityName" Width="215"
ValueField="EntityID" FieldLabel="Entity" EmptyText="Select Entity" LabelWidth="35"
Margins="0 20 0 0" ComponentCls="test">
<Store>
<ext:Store ID="stEntityCopyFrom" runat="server">
<Model>
<ext:Model ID="modelEntityCopyFrom" runat="server">
<Fields>
<ext:ModelField Name="EntityName" />
<ext:ModelField Name="EntityID" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
<br />
<ext:Panel ID="panelCalendar" runat="server">
<Items>
<ext:Container ID="containerCalendar" runat="server">
<Content>
<asp:Table ID="tbDashboard" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell ID="hdCell1" runat="server" Text="test" />
<asp:TableHeaderCell ID="hdCell2" runat="server" Text="test" />
<asp:TableHeaderCell ID="hdCell3" runat="server" Text="test"/>
<asp:TableHeaderCell ID="hdCell4" runat="server" Text="test"/>
<asp:TableHeaderCell ID="hdCell5" runat="server" Text="test" />
<asp:TableHeaderCell ID="hdCell6" runat="server" Text="test" />
<asp:TableHeaderCell ID="hdCell7" runat="server" Text="test" />
</asp:TableHeaderRow>

</asp:Table>
</Content>
</ext:Container>
</Items>
</ext:Panel>
</center>
</form>
</body>
</html>




The normal combobox control should look like this one:
23970

Thank you very much in advance for your help!

Daniil
May 08, 2015, 7:10 PM
Hi @Fahd,

Please clarify have you tried a ComboBox's Height?
<ext:ComboBox runat="server" Height="50" />

Please note that a ComboBox doesn't quite support custom height, so, a trigger doesn't look very good if change it.

Fahd
May 08, 2015, 7:12 PM
Yes. That was the first thing I tried and it did not work.

Daniil
May 08, 2015, 7:47 PM
It works in this test case. Please provide your test case.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:ComboBox runat="server" Height="50" />
</form>
</body>
</html>

Fahd
May 08, 2015, 8:01 PM
My test code was included in my initial post can be found at the top of this screen. Your test code omitted my CSS thus it works for you.

Daniil
May 08, 2015, 8:16 PM
I just took your test case, set Height="50" for the ComboBox (it was the only change) and it appears to be working for me.

Fahd
May 08, 2015, 8:40 PM
I tested my code in IE 11, Chrome 42, Firefox 37.0.2 and it does not work in any of them.

Daniil
May 11, 2015, 4:19 PM
Please post the Page Sources rendered to a browser.

Fahd
May 11, 2015, 4:39 PM
thanks, below is my Page Source code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<link type="text/css" rel="stylesheet" href="/extjs/resources/ext_theme_classic/ext-theme-classic-all-embedded-css/ext.axd?v=31210" id="ext-theme" />
<link type="text/css" rel="stylesheet" href="/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=31210" id="extnet-styles" />
<script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=31210"></script>
<script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=31210"></script>
<title>

</title><link rel="stylesheet" href="../Styles/jquery-ui.css" />
<style type="text/css">
/* set main table */
table
{
width: 98%;
border-collapse: collapse;
border-bottom-width: thin;
border-top-width: thin;
background-color: #FFFFFF;
}

th
{
font-weight: bold;
color: #3E3E3B;
background-color: #D7E4F2;
border-top-color: #425AA7;
border: 1px solid #D0DEF0;
}


td
{
border: 1px solid #D0DEF0;
border-right-width: thin;
border-right-color: #D0DEF0;
border-bottom-width: thin;
border-bottom-color: #D0DEF0;
height: 60px;
color: #425AA7;
}


#cmbCopyFrom .x-field .x-table-plain .x-form-item .x-form-type-text .x-field-default .x-border-box
{
height: 20px;
border: 0px none;
}

/* set column width for Sunday's event boxes */
#tblHour
{
width: 50px;
}

#tblHour .cellHour
{
width: 50px;
}

.rowHour
{
border-style: none;
}

.cellHour
{
background-color: white;
font-weight: bold;
border-bottom-style: none;
border-top-style: none;
border-left-style: none;
border-right: 1px solid #D0DEF0;
width: 50px;
padding: 0px 0px 0px 0px;
text-align: center;
}

.cellEvent
{
font-weight: bold;
border-style: none;
border: 0px solid #D0DEF0;
}
</style>

<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ResourceManager1",aspForm:"form1"});Ext.onReady(function(){Ext.create("Ext.form.field.ComboBox",{id:"cmbCopyFrom",componentCls:"test",renderTo:"App.cmbCopyFrom_Container",width:215,margins:"0 20 0 0",fieldLabel:"Entity",labelWidth:35,emptyText:"Select Entity",displayField:"EntityName",valueField:"EntityID",store:{model:Ext.define("App.modelEntityCopyFrom", {extend: "Ext.data.Model", fields:[{name:"EntityName"},{name:"EntityID"}] }),storeId:"stEntityCopyFrom",autoLoad:true,proxy:{type:'memory'}}});Ext.create ("Ext.panel.Panel",{id:"panelCalendar",renderTo:"App.panelCalendar_Container",items:[{id:"containerCalendar",xtype:"container",contentEl:"containerCalendar_Content"}]});});
//]]>
</script>
</head>
<body>
<form method="post" action="ExtForum.aspx" id="form1">
<div class="aspNetHidden">



</div>




<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F5C7613E" />
</div>

<center>
<div id="App.cmbCopyFrom_Container"></div>
<br />
<div id="App.panelCalendar_Container"><div id="containerCalendar_Content" class="x-hidden">
<table id="tbDashboard">
<tr>
<th id="hdCell1">test</th><th id="hdCell2">test</th><th id="hdCell3">test</th><th id="hdCell4">test</th><th id="hdCell5">test</th><th id="hdCell6">test</th><th id="hdCell7">test</th>
</tr>
</table>
</div></div>
</center>
</form>
</body>
</html>

Daniil
May 11, 2015, 10:10 PM
Thank you.

I see that you don't set any Height for the ComboBox. Could you, please, clarify why?

Fahd
May 12, 2015, 1:40 PM
I tried
Height="30" and it didn't fix it so I removed it and see if that would change anything.

Daniil
May 12, 2015, 8:51 PM
Could you, please, set Height="50" in your test case and post a screenshot how you see that?

Please specify Ext.NET version you are dealing with.

Also please try to run the page in different browsers.

Fahd
May 14, 2015, 7:55 PM
I figured out why this is happening.
I removed the css for the "td" tag and the Ext.combo control now displays as normal. For some reason, the css for the td tag is overriding the Ext.Combo's styles.

This is what I removed

td
{
border: 1px solid #D0DEF0;
border-right-width: thin;
border-right-color: #D0DEF0;
border-bottom-width: thin;
border-bottom-color: #D0DEF0;
height: 60px;
color: #425AA7;
}

Thanks for your support anyway. You can mark this thread as "Closed".