Trying to align a telerik component in a bootstrap modal

I'm struggling to align the radmediaplayer telerik control in the center, but I can't seem to get it right. Any assistance would be greatly appreciated. Thank you.

<asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade">
    <asp:Panel ID="pnlInner3" runat="server" CssClass="modal-dialog" >
        <asp:Panel ID="pnlContent4" CssClass="modal-content" runat="server">
            <asp:Panel runat="server" class="modal-header">                        
                <h4 class="modal-title" >Clip Player</h4>
            </asp:Panel>
            <asp:panel runat="server" class="modal-body">
                <telerik:RadScriptManager runat="server" ID="RadScriptManager2" />
                <div style="text-align:center;">
                    <telerik:RadMediaPlayer ID="ClipPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px" DestroyOnClose ="true">
                    </telerik:RadMediaPlayer>
                </div>
            </asp:panel>
            <asp:panel runat="server" class="modal-footer">
                <asp:Button ID="Button4" runat="server" Text="Close" OnClick="btnClose_Click" class="btn btn-default"/>
            </asp:panel>
        </asp:Panel>
    </asp:Panel>
</asp:Panel>

Answer №1

Initially, there are a couple of general issues to address:

  • RadMediaPlayer lacks a DestroyOnClose property unlike RadWindow
  • The script manager should be the first control within the container.

Now, focusing on your specific question - what particular aspect is not functioning properly? Have you attempted setting margin: auto for the div element containing the media player control? This method worked successfully in my basic configuration:

<div>
    <telerik:RadMediaPlayer ID="ClipPlayer" CssClass="centeredPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px">
    </telerik:RadMediaPlayer>
</div>

and

    .centeredPlayer
    {
        margin: auto;
    }

If this approach does not yield results for you, examine the generated HTML to determine which CSS rules are affecting the layout. Initially, try centering a simple div before modifying RadMediaPlayer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging progress bars between various nodes using HTML and CSS

I am currently facing a challenge in creating a stepping wizard form layout that features a bar at the top of the page. This bar displays a dynamic number of steps (nodes) and progress bars that connect these nodes. However, I am encountering difficulties ...

Ensure equal width for an HTML element by matching it with the dimensions

Hello, I am facing an issue with a dropdown button. Whenever I hover over it, the links to different pages drop down. However, I want the width of these links to be the same as that of the button. The size of the button varies as it is set to 100% width o ...

How can I gain entry to this array or object in order to link it to a dropdown list?

I received this data structure from a web method [ { "id": 367, "location": "Gagra" }, { "id": 368, "location": "Gudauta" }, { "id": 369, "location ...

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

add a border to an image when it is hovered over

I'm having trouble getting the hover effect to work on my images. I suspect that I may be targeting the CSS hover incorrectly, and there could also be a conflict with the jQuery code that is attached to the images. Here is the link to the fiddle: ht ...

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

I'm currently working on a simple sliding animation. However, the div that slides in is utilizing percentages for its width and right positioning. The issue arises specifically in Webkit browsers. When using jQuery to retrieve the value, it returns t ...

Hide the entire TR if Mysql equals zero

How can I apply the style "display: none;" to an entire TR if the result from row credits is 0? Should I achieve this using CSS or a MySQL query? <?php $username = "root"; $password = ""; $database = "aaa"; $mysqli = ne ...

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Our marketplace multi-vendor site on Magento allows sellers to list their products for sale. The frontend displays the price using the following code: Phtml <input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" clas ...

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

I'm having some trouble getting my HTML menu within the header tag to hover correctly in Angular. Can someone please provide

https://i.sstatic.net/SK6Dw.png My Angular application's CSS is causing the menu to not hover over all controls in the component. CSS nav { background-color: #4D678D; } nav ul { padding: 0; mar ...

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

Retrieve content from a URL using C#

Is there a way to retrieve content from a URL on LinkedIn's website using an Email ID input to receive the HTML code displayed below? Unfortunately, when attempting to access the URL programmatically, an issue with signing into LinkedIn arises. I have ...

Simple HTML alignment tool instead of Bootstrap

Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Looking to add a company logo image to the top right corner of my R markdown report, and then shift the title down by 3 or 4 cm for a letterhead-like appearance. Does anyone have suggestions on how I can achieve this in my .Rmd file? Appreciate any assist ...

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

Background color set for only half of the div

Is it possible to achieve a design similar to this using CSS, with a Half-background color for a div? ...

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

Assistance with centering elements using pure CSS in responsive web design

Seeking assistance as I am facing a challenge with aligning the sponsors section on the website mentioned below. Despite implementing responsive web design, I am struggling to center the sponsors correctly. Your guidance is appreciated... ...

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

Excel export in SQL Reporting Services 2005 causing data truncation issue

I have a large amount of data that needs to fit in a Textbox. When I export to Excel, the data wraps and gets cut off. If I manually adjust the textbox height, I can see all the data, but I want it to display properly the first time. ...