You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@jmeter.apache.org by sebb <se...@gmail.com> on 2015/10/05 11:45:13 UTC
CSS tweaks to improve Parameter table spacing
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.
Re: CSS tweaks to improve Parameter table spacing
Posted by sebb <se...@gmail.com>.
On 5 October 2015 at 10:52, Vladimir Sitnikov
<si...@gmail.com> wrote:
> Does <table> solution count?
No, that would require changing all the scripts, and it's hard to maintain.
> Vladimir
Re: CSS tweaks to improve Parameter table spacing
Posted by Vladimir Sitnikov <si...@gmail.com>.
Does <table> solution count?
Vladimir
Re: CSS tweaks to improve Parameter table spacing
Posted by Felix Schumacher <fe...@internetallee.de>.
Am 05.10.2015 um 17:55 schrieb sebb:
> On 5 October 2015 at 14:06, Felix Schumacher
> <fe...@internetallee.de> wrote:
>>
>> Am 5. Oktober 2015 11:45:13 MESZ, schrieb sebb <se...@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!
Great.
Felix
>
>
>> The paddingd will have to be removed for the smaller media styles afterwards.
>>
>> Regards,
>> Felix
>>
>>
>>
Re: CSS tweaks to improve Parameter table spacing
Posted by sebb <se...@gmail.com>.
On 5 October 2015 at 14:06, Felix Schumacher
<fe...@internetallee.de> wrote:
>
>
> Am 5. Oktober 2015 11:45:13 MESZ, schrieb sebb <se...@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
>
>
>
Re: CSS tweaks to improve Parameter table spacing
Posted by Felix Schumacher <fe...@internetallee.de>.
Am 5. Oktober 2015 11:45:13 MESZ, schrieb sebb <se...@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.
The paddingd will have to be removed for the smaller media styles afterwards.
Regards,
Felix