Ticket T269461
Visible to All Users

ASPxRoundPanel overlays drop-down windows of ASPxComboBox and ASPxDateEdit if the bootstrap.css stylesheet is used

created 10 years ago

I'm using the round panel and it is cutting off the text on the drop downs and date edit screens.  I've attached the css and also the page that is having the issue.

Answers approved by DevExpress Support

created 10 years ago

Hello Gerald,
After examining your markup and CSS code, I found that you are using divs with corresponding CSS classes: col-sm-12 for the content of ASPxRoundPanel and col-sm-4 for drop-down editors, like ASPxComboBox, ASPxDateEdit, etc.
In the bootstrap.css files, you set the position for the col-sm-12 and col-sm-4 classes to “relative”. The position of the drop-down editors is “absolute” by default. And ASPxRoundPanel has its default style set to “overflow: hidden”, which leads to overlapping drop-down editors.
A similar combination of style positioning is described in this How to make absolute positioned elements overlap their overflow hidden parent article.

As a solution, I suggest that you manually set the “position: inherit” style for the col-sm-12 and col-sm-4 classes in the page markup, so these divs ignore the round panel hidden style. The markup would be the following:

ASPx
<div class="col-sm-12" style="position: inherit"> <div class="col-sm-4" style="position: inherit">

Please let me know if this solution is helpful. If you have more questions, I will be happy to answer them.

    Comments (1)

      That worked.  Thank you so much.

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.