Remove From My Forums

Need CSS for overlapping Panel over controls.

Question

User1052662409 posted

Hi All,

I have a panel between two control on my form. I put some height for panel.

 <div class="col-sm-6 col-xs-7  textboxtxt">
                                            
                                     
                                            <asp:TextBox ID="txt_pnno" runat="server" data-toggle="popover"  title="<%$Resources:Resource, a_e_req_pname %>"
                                              class="form-control bottom15"></asp:TextBox>

                                       
                                           
                                        </div>
                                        <div class="col-sm-3 col-xs-5 dontprint">
                                             <asp:Panel ID="Panel2" runat="server" style="display:none;  border:1px black; background-color:#c7f7f0;" Width="350px" Height="350px" >
                                                <span style="font-size:15px;color:black;">This  is the list of projects.</span>
                                            </asp:Panel>
                                            
                                            <cc1:DropShadowExtender ID="DropShadowExtender1" TargetControlID="Panel2" Rounded="true"  runat="server"></cc1:DropShadowExtender>
                                        </div>
                                    </div>

                                    <div class="form-group" id="divDeputy" style="display: none;" runat="server">
                                       
                                        <div class="col-sm-6  textboxtxt">
                                           
                                            <asp:DropDownList ID="ddl_avdvdeputy" runat="server" CssClass="form-control">
                                            </asp:DropDownList>
                                            
                                        </div>
                                    </div>

When panel load on page load it make the distances between both control. For reference I put the image below.

I want the panel should over lap the control.

What I need to put in css for that.

Please suggest.

Thanks

Monday, March 25, 2019 1:06 PM

Answers

User839733648 posted

Hi demoninside9,

demoninside9
Need CSS for overlapping Panel over controls.

The layout is easy to set. You just have to use grid class to make the controls display as you want.

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="col-sm-6">
            <div class="form-group">
                <asp:TextBox ID="txt_pnno" runat="server" data-toggle="popover" title="aaaaaaaaaaaaaaaaaa"
                    CssClass="form-control bottom15"></asp:TextBox>
            </div>
            <div class="form-group">
                <asp:DropDownList ID="ddl_avdvdeputy" runat="server" CssClass="form-control">
                </asp:DropDownList>
            </div>
        </div>
        <div class="col-sm-6">
            <asp:Panel ID="Panel2" runat="server" Style="border: 1px black; background-color: #c7f7f0;" Width="350px" Height="350px">
                <span style="font-size: 15px; color: black;">This  is the list of projects.</span>
            </asp:Panel>
            <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" TargetControlID="Panel2" Rounded="true" runat="server" />
        </div>
    </form>

result:

For more about bootstrap grid, you could refer to: https://getbootstrap.com/docs/4.0/layout/grid/

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, March 27, 2019 5:57 AM

All replies

0

Sign in to vote

User839733648 posted

Hi demoninside9,

According to your description and code, I'm sorry that I do not understand your requirement clearly.

I want the panel should over lap the control.

Which control do you want the panel overlap?

And when the panel overlap the control, the control will not work.

So I'm confused about this.

Could you please describe your requirement more in details?

What effect you want to make?

Best Regards,

Jenifer

Tuesday, March 26, 2019 2:37 AM
0

Sign in to vote

User1052662409 posted

Jenifer Jiang
Could you please describe your requirement more in details?

Sure.

I have 10 controls on a form with bootstrap layout.

I want there should be a panel or div or many be any other control which shows some helping text about the control.

I mean when I jump to another control then this panel/div/etc should show text about the control.

For example, If focus on country dropdownlist the panel should show in panel "In which country you want to execute your workshop"

and again when I go to next control which is the purpose of workshop (a text box), the panel /div should change the text to "What is the purpose of this workshop"

so on....

I hope now you get the about my requirement.

Thanks

Tuesday, March 26, 2019 3:15 AM

User839733648 posted

Hi demoninside9,

I suggest that you could use BootstrapTooltips to achieve your requirement.

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.

Here is a working demo.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('#txt_pnno').tooltip({ 'trigger': 'focus', 'title': 'This is a textbox', 'placement': 'right' });
            $('#ddl_avdvdeputy').tooltip({ 'trigger': 'focus', 'title': 'This is a dropdownlist', 'placement': 'right' });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="col-sm-6">
            <div class="form-group">
                <asp:TextBox ID="txt_pnno" runat="server" data-toggle="popover" title="aaaaaaaaaaaaaaaaaa"
                    CssClass="form-control bottom15"></asp:TextBox>
            </div>
            <div class="form-group">
                <asp:DropDownList ID="ddl_avdvdeputy" runat="server" CssClass="form-control">
                </asp:DropDownList>
            </div>
        </div>
    </form>
</body>
</html>

result:

Best Regards,

Jenifer

Tuesday, March 26, 2019 6:43 AM

0

Sign in to vote

User1052662409 posted

Here is a working demo.

Thanks Jenifer, you demo working fine.

But my requirement is that a panel not a tool-tip stay remain there and the whole story comes out there for every control I focus. some like the below

I suggest that you could use BootstrapTooltips to achieve your requirement.

This I already done with.

Tuesday, March 26, 2019 7:11 AM

User839733648 posted

Hi demoninside9,

demoninside9
Need CSS for overlapping Panel over controls.

The layout is easy to set. You just have to use grid class to make the controls display as you want.

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="col-sm-6">
            <div class="form-group">
                <asp:TextBox ID="txt_pnno" runat="server" data-toggle="popover" title="aaaaaaaaaaaaaaaaaa"
                    CssClass="form-control bottom15"></asp:TextBox>
            </div>
            <div class="form-group">
                <asp:DropDownList ID="ddl_avdvdeputy" runat="server" CssClass="form-control">
                </asp:DropDownList>
            </div>
        </div>
        <div class="col-sm-6">
            <asp:Panel ID="Panel2" runat="server" Style="border: 1px black; background-color: #c7f7f0;" Width="350px" Height="350px">
                <span style="font-size: 15px; color: black;">This  is the list of projects.</span>
            </asp:Panel>
            <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" TargetControlID="Panel2" Rounded="true" runat="server" />
        </div>
    </form>

result:

For more about bootstrap grid, you could refer to: https://getbootstrap.com/docs/4.0/layout/grid/

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, March 27, 2019 5:57 AM

Answered by:

Need CSS for overlapping Panel over controls.

Question

Answers

demoninside9

All replies

Jenifer Jiang

demoninside9