What's New?

reducing the space between the text and label of control ext:textfield with Css.

  1. #1
    Jan 06, 2012, 9:19 AM

    reducing the space between the text and label of control ext:textfield with Css.

    I need reduce the space between the text and label of control ext:textfield using Css. I wanted change this space or distance using css because I wanted change all controls, in all pages...

    I insert a follow row in my css file:


    .x-form-item.x-form-label-top label.x-form-item-label 
{
    margin-bottom: 0px !important;
}
    but it´s don´t work...
    Thanks for all sugestions...
    Last edited by Daniil; Jan 08, 2012 at 5:04 AM. Reason: Please use [CODE] tags
  2. #2
    Jan 08, 2012, 5:08 AM
    Hi,

    Please use:
    <style type="text/css">
    .x-form-item-label {
        width: 50px !important;
    }
</style>
    Though I'd recommend to use the LabelWidth property.
    http://docs.sencha.com/ext-js/3-4/#!...cfg-labelWidth
  3. #3
    Jan 09, 2012, 9:41 AM
    Hi Danii.. tanks for your repply...

    I using a LabelAlign="top"...

    I´m trying set the Heigth property in my css, but stay don´t working...

    .x-form-item-label {
    font-size:11px !important;
    height:15px !important;
}
    Any sugestion?
  4. #4
    Jan 09, 2012, 10:09 AM
    Please start a new forum thread.
  5. #5
    Jan 09, 2012, 11:36 AM
    Sorry, I did not express myself right

    My problem remains the space between the label and text in the control ext:TextField

    You suggest I change the Width of the label, but as I am using LabelAlign as 'Top', I tried changing the Heigth

    This change had no effect ... longer has any suggestions to solve my problem? remembering that I am trying to set up im using CSS file.

    Thank you for your attention!
  6. #6
    Jan 09, 2012, 12:29 PM
    Please demonstrate with a screen-shot what space do you need to reduce in the LabelAlign="Top" case?
  7. #7
    Jan 09, 2012, 12:45 PM
    following image as requested

    Thank you for your attention

    Click image for larger version.  Name: ext-textfield exemple reduce space between label and text.png  Views: 594  Size: 10.3 KB  ID: 3675
  8. #8
    Jan 09, 2012, 10:20 PM
    Thanks.

    Please decrease "line-height". By default it's rendered with 14px.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>Ext.NET Example</title>

    <style type="text/css">
        .x-form-label-top label.x-form-item-label {
            line-height: 9px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FormPanel runat="server" LabelAlign="Top">
            <Items>
                <ext:TextField runat="server" FieldLabel="FieldLabel" />
                <ext:TextField runat="server" FieldLabel="FieldLabel" />
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>
  9. #9
    Jan 10, 2012, 11:34 AM
    Working...

    Tanks for all, Daniil

Similar Threads

  1. Reducing space between two vertical combo box
    By abhijit in forum 1.x Help
    Replies: 4
    Last Post: Dec 23, 2011, 11:47 AM
  2. [CLOSED] Label Editor - Ellipsed text in labe, but want full text in editor
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2011, 10:52 PM
  3. Out of stack space in Text area
    By Sagar2529 in forum 1.x Help
    Replies: 0
    Last Post: Mar 11, 2011, 11:57 AM
  4. [CLOSED] Aligning label of textfield in compositefield to left of control
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 20, 2010, 2:27 PM
  5. Empty Label takes up space in V0.8
    By EzaBlade in forum 1.x Help
    Replies: 0
    Last Post: Jul 07, 2009, 7:09 PM

Tags for this Thread

Posting Permissions