:before and width not working?

Patrik
Posts: 236
Joined: Thu Nov 28, 2013 9:32 am
Location: Hamburg/Germany
Contact:

:before and width not working?

Post by Patrik » Thu Aug 08, 2019 9:22 am

Hi,

with css I have this rule:

Code: Select all

service > *:before {
	width	: 22em;
	content	: "    " name() ": ";
}

service > * {
	display		: block;
	content		: oxy_textfield(edit, "#text", width, 30em);
	visibility	: -oxy-collapse-text;
}
The idea is to have vertially alligned text fields with the element name in front of it. This works fine with the desktop version. However, in Web Author using Firefox the vertical allignment (i.e. the width property of the :before) does not work.

Any ideas or suggestions?

Thanks and regards,
Patrik

cristi_talau
Posts: 217
Joined: Thu Sep 04, 2014 4:22 pm

Re: :before and width not working?

Post by cristi_talau » Thu Aug 08, 2019 9:39 am

Hello,

By default, ":before" elements have "display:inline". According to the CSS specification, the "width" property does not apply for "inline" elements [1]. That's why the browser renders it this way. However, in the desktop application, we decided to take it into account.

The solution that works in all cases is to use "display:inline-block".

Best,
Cristian

[1] https://www.w3.org/TR/CSS2/visudet.html#inline-width

Patrik
Posts: 236
Joined: Thu Nov 28, 2013 9:32 am
Location: Hamburg/Germany
Contact:

Re: :before and width not working?

Post by Patrik » Thu Aug 08, 2019 11:10 am

Hi Cristian,

indeed this worked for me.

Thanks a lot.
Patrik

Post Reply