[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

CSS Style with lineheight

I have a style that makes my grid row 34px high. But if the text wraps on two lines, it leaves too much linespacing between the lines.

How do I make my grid row height 34px, but make my linespacing 14/14.

thanks!
    .RadGrid_RTOGrid, .RadGrid_RTOGrid .rgMasterTable, .RadGrid_RTOGrid .rgDetailTable, .RadGrid_RTOGrid .rgGroupPanel table, .RadGrid_RTOGrid .rgCommandRow table, .RadGrid_RTOGrid .rgEditForm table, .RadGrid_RTOGrid .rgPager table {
        font-weight: 100;
        font-size: 14px;
        line-height: 34px;
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;
    }

Open in new window

0
Starr Duskk
Asked:
Starr Duskk
  • 5
  • 3
3 Solutions
 
GaryCommented:
Don't apply the line-height attribute but set the row/cell height attribute and leave the line height as it normally is.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I need more assistance... what I did is not working... Please provide me with the proper elements. thanks!

        font-weight: 100;
        font-size: 14px;
        min-height: 34px;
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;

Open in new window

0
 
rwniceingCommented:
Dear Author,

you could set line-height to 7px(space)+14px(font-size)+7px(space)=28px for the spacing between word to word equal to 14px if word wrapped.

But when you set the row height = 34px, the second word-wrap line will overflow the row. So, I suggest this if you have to keep row height 34px; don't set row height let it auto adjust and put row white-color border-width  with 3px to simulate row height to be 34px and if word wrapped, the line to line or word to wrod  spacing is also  keeping 14px;
.test{
font-size:14px;
line-height:28px;
border-color:#FFFFFF;
border-style:solid;
border-width:3px;
}

Open in new window

If you send us the complete or portion of html page with css , it will be easier to understand your question

Rwniceing
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Capture2.PNG
Above you see the User Name field. It wraps. I don't want that big gappy space between words. On average the line height should be 34. I don't want it tight like 14/14. It needs to minimum be 34px. It can go larger if the row wraps. It doesn't have to stay at 34px. But I don't want the wrap to be gappy.

Hope that helps.
'Thanks!
0
 
rwniceingCommented:
k*px(space)+14px(font-size)+k*px(space)=b*px

where b, word spacing, can be anything you want by k change

So read my previous post and set each side of border color can be different by CSS if need .

Rwniceing.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
k*px(space)+14px(font-size)+k*px(space)=b*px

Can you please convert the above into a language I can understand?

Please just tell me what it would be for 14/14 line spacing with 34 minimum height on the panel, but center the text vertically in the panel.

thanks!
0
 
rwniceingCommented:
.test{
font-size:14px;
line-height:28px;
border-color:#FFFFFF;
border-style:solid;
border-width:3px;
}


you can  put the code above for your class style, you will know what I say. If not, please send us your html page with css file, and show us what you expect before or after(even this is not what you expect, but at least, we know what is problem there).

You can put it in http://jsfiddle.com or http://jsfiddle.net  website , others are able to read it
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
that did not work. I wrote telerik and asked for help on this and this is the result of what works.

I had to set the line height to 15px to make the word wraps not have gaps between them, then to make a minimal row height, I had to add padding on each row and header as below:



   .RadGrid_RTOGrid,
    .RadGrid_RTOGrid .rgMasterTable,
    .RadGrid_RTOGrid .rgDetailTable,
    .RadGrid_RTOGrid .rgGroupPanel table,
    .RadGrid_RTOGrid .rgCommandRow table,
    .RadGrid_RTOGrid .rgEditForm table,
    .RadGrid_RTOGrid .rgPager table {
        font-weight: 100;
        font-size: 14px;
        line-height: 15px; /* so won't be gappy on line breaks */
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;
    }


/* remove the gaps between line breaks, but keep height consistent */
div.RadGrid_RTOGrid .rgRow td,
div.RadGrid_RTOGrid .rgAltRow td {
    padding-top: 10px;
    padding-bottom: 10px;
}

div.RadGrid_RTOGrid .rgHeader {
    padding-top: 10px;
    padding-bottom: 10px;
}


.RadGrid_RTOGrid .rgHeader, .RadGrid_RTOGrid .rgHeader a {
    color: black;
    font-weight: bold;
    font-size: 12px;
      line-height: 15px; /* so won't be gappy on line breaks */
}

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
None of the suggestions worked. Found a solution from telerik.
0

Featured Post

Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now