Enable JavaScript to interact with content and submit forms on Wolfram websites. Learn how

WebRow

WebRow[{expr₁, expr₂, …}]

represents an HTML column containing the expr_i.

WebRow[expr,options]

displays with expr formatted using the specified option settings.

Details and Options

WebRow is used to arrange and style expressions on a webpage.
WebRow can be used with WebColumn and WebItem to provide a webpage layout.
WebRow[expr,spec₁,spec₂,…] allows the spec_i to be any list or sequence of the following:

	opt₁val₁,…	explicit options
	"class"	a named class name from the current stylesheets
	color directive	color (Red, RGBColor[…], …)
	size directive	a size (width, {width,height}, …)
	InterfaceSwitched[…]	switch formatting based on the environment
	Scaled[…]	dimension relative to window size
	Larger	larger size specification
	Smaller	smaller size specification
	n (any number)	dimension with pixel size n
	Tiny, Small, etc.	absolute size specification
	Italic	text italic
	Bold	text bold
	Underlined	text underlined
	Dashed	border drawn dashed
	Dotted	border drawn dotted
	Thickness[…],Thick,Thin	border thickness
	Mouseover[…]	switch formatting based on mouseover

A few common explicit options include:

	Background	background color
	FontSize	font size
	FontFamily	font family
	FontSlant	font slant (Plain, Italic, …)
	FontWeight	font weight (Plain, Bold, …)
	Alignment	alignment of the content
	Scrollbars	scrollbar specification
	Frame	whether to put a frame around the plot
	FrameStyle	style specifications for the frame
	ImageMargins	absolute margins to leave around the item

You can specify an option that is an arbitrary CSS property, like "box-shadow"  "10px 5px 5px black".

Examples

open allclose all

Basic Examples (1)

Deploy a single WebRow to the cloud:

Use Scaled to specify a full-page layout:

Scope (2)

By default, a WebRow expands to fit the available viewport:

When used inside another WebRow, it will expand to fit the remaining size:

Elements that do not fit the viewport are automatically wrapped:

The second argument can be used to specify the size of the element:

A list can be used to specify width and height:

Use Automatic to specify that the size should fit the content, or Full to specify that it should fit all the remaining space:

Options (10)

Alignment (1)

Define a series of elements:

Use the Alignment option to specify how the contents should be aligned within the available area:

Background (1)

The Background option can be used to specify a background color using any color specification, such as RGBColor:

Any CSS specification can be used:

FontFamily (1)

Use FontFamily to specify the font:

FontSize (1)

The FontSize option accepts a variety of specifications and allows for inheritance:

Any CSS specification can be used:

FontSlant (1)

Use FontSlant to specify slanted characters in text:

The Italic directive can be given instead of explicitly using the FontSlant option:

FontWeight (1)

Use FontWeight to specify how heavy the characters in a font should be:

The Bold directive can be given instead of explicitly using the FontWeight option:

Frame (1)

Draw a frame around the whole graphic:

FrameStyle (1)

Specify the overall frame style:

ImageMargins (1)

Have 20-point margins on all sides:

Scrollbars (1)

Specify both horizontal and vertical scrollbars for WebRow:

Use only a horizontal scrollbar:

Applications (1)

Define a reusable media component:

Use the component in a simple layout:

Properties & Relations (2)

InterfaceSwitched can be used to switch the content of a WebRow based on viewport size:

InterfaceSwitched can also be used to switch the value of a property:

Specify a row that collapses to a column on a mobile device:

ExportString can be used to compile WebRow to HTML:

Possible Issues (1)

CloudDeploy uploads the HTML generated from the page expression at the time it is executed:

Neat Examples (2)

Write a centered layout:

Now test how it looks with some content:

Write a layout in which the order of elements depends on the width of the screen:

Top