<commit_before>---
title: How To Configure Size of Rotator with Buttons
page_title: How To Configure Size of Rotator with Buttons | RadRotator for ASP.NET AJAX Documentation
description: How To Configure Size of Rotator with Buttons
slug: rotator/getting-started/how-to-configure-size-of-rotator-with-buttons
tags: how,to,configure,size,of,rotator,with,buttons
published: True
position: 1
---

# How to Configure Size of Rotator with Buttons

This help article illustrates how to properly configure the size of a rotator with buttons so that the items are not cut or misaligned on initial showing or during animiation playing.

 * [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
 
 * [Configure Rotator with Buttons](#configure-rotator-with-buttons)
 
 * [Example (RadRotatorSizeConfigurator Class Implementation)](#example-radrotatorsizeconfigurator-class-implementation)

## Configure Rotator with Buttons

To configure a rotator with buttons, you should do the following:
 * Define the proper dimensions for the rotator, its items and item template as per the [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration) article.
 * Determine the size of the buttons and just add it to the rotator's width/height. 
 
For example, if we want to show four items (100x100 pixels) in a horizontal rotator with buttons for the black skin with Lightweight render mode, we can follow the steps below:
1. Set the single item's dimensions - `ItemWidth`="100" `ItemHeight`="100".
1. Set the item template dimensions - .itemTemplate {width: 100px; height: 100px;}.
1. Inspect the size of a single button - 30x30. 

	![rotator-size-buttons](images/inspect-button-size.png)
	
1. Calculate and set the rotator's width - (4 items * 100) + 2 buttons * 30 = 400 + 60 = 460px.
<commit_msg>fix list in rotator article<commit_after>---
title: How To Configure Size of Rotator with Buttons
page_title: How To Configure Size of Rotator with Buttons | RadRotator for ASP.NET AJAX Documentation
description: How To Configure Size of Rotator with Buttons
slug: rotator/getting-started/how-to-configure-size-of-rotator-with-buttons
tags: how,to,configure,size,of,rotator,with,buttons
published: True
position: 1
---

# How to Configure Size of Rotator with Buttons

This help article illustrates how to properly configure the size of a rotator with buttons so that the items are not cut or misaligned on initial showing or during animiation playing.

 * [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
 
 * [Configure Rotator with Buttons](#configure-rotator-with-buttons)
 
 * [Example (RadRotatorSizeConfigurator Class Implementation)](#example-radrotatorsizeconfigurator-class-implementation)

## Configure Rotator with Buttons

To configure a rotator with buttons, you should do the following:
 * Define the proper dimensions for the rotator, its items and item template as per the [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration) article.
 * Determine the size of the buttons and just add it to the rotator's width/height. 
 
For example, if we want to show four items (100x100 pixels) in a horizontal rotator with buttons for the black skin with Lightweight render mode, we can follow the steps below:

1. Set the single item's dimensions - `ItemWidth`="100" `ItemHeight`="100".
1. Set the item template dimensions - .itemTemplate {width: 100px; height: 100px;}.
1. Inspect the size of a single button - 30x30. 

	![rotator-size-buttons](images/inspect-button-size.png)
	
1. Calculate and set the rotator's width - (4 items * 100) + 2 buttons * 30 = 400 + 60 = 460px.

{'fraction_non_alphanumeric': 0.07972724888539208, 'fraction_numerical': 0.022029897718332022, 'mean_word_length': 5.0157728706624605, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3024123', 'n_tokens_mistral': 1157, 'n_tokens_neox': 1032, 'n_words': 438}