jmeter-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sebb <seb...@gmail.com>
Subject Re: CSS tweaks to improve Parameter table spacing
Date Mon, 05 Oct 2015 15:55:03 GMT
On 5 October 2015 at 14:06, Felix Schumacher
<felix.schumacher@internetallee.de> wrote:
>
>
> Am 5. Oktober 2015 11:45:13 MESZ, schrieb sebb <sebbaz@gmail.com>:
>>The Parameter tables generally look OK, however for some combinations
>>of description text and screen size the left and right hand columns
>>can run together making it hard to read.
>>
>>For example:
>>
>>http://jmeter.apache.org/usermanual/component_reference.html#FTP_Request_parms1
>>
>>Try adjusting the screen width and you will see that the text in one
>>column sometimes touches the adjacent column.
>>
>>I tried playing with padding and margins, but the changes I tried had
>>the side-effect of causing the "Required" column to wrap under the
>>"Name" column at smaller widths.
>>
>>This is far harder to read than the occasional touching column, so I
>>did not apply any fix.
>>
>>I don't have much experience with CSS; perhaps someone else can fix
>>this?
>>Not worth spending lots of time on.
>
> You could try to add/change
>
> padding-left: 1.5rem;
> padding-right: 1.5rem;
> width: 45%;
>
> in the ".property .description" style.

Thanks, that works.

I'm suprised that it is necessary to reduce the width %age.
I would have thought that the padding should be done within the width,
and should not affect anything outside the cell. i.e. the padding
would be treated as part of the content when calculating layout from
the percentages.
But experimentation shows that it is necessary otherwise the columns
don't behave well at smaller widths. And the smaller the browser
width, the smaller the %age needed to keep the 3 columns.

I got curious about that and did a web search (css padding increases
width); it turns out that this is how the W3C designed the feature:
i.e. padding is not treated as part of the content. Go figure.

However there is an override which can be used to provide more
intuitive behaviour:

box-sizing: border-box;

When I added this setting, the original width of 60% works properly. Yay!


> The paddingd will have to be removed for the smaller media styles afterwards.
>
> Regards,
> Felix
>
>
>

Mime
View raw message