Click here to Skip to main content
15,868,082 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone,

I am creating an ASP.NET webpage and I have a bottom segment in which want to add a SearchBox (TextBox).
<div class="BottomBar">
                    <asp:Panel runat="server" ID="pnlSearch" GroupingText="Search" CssClass="searchBar">
                           <asp:TextBox runat="server" ID="txtSearch" TextMode="Search" />
                           <asp:Button runat="server" ID="btnSearch" Text="Zoek" CssClass="searchButton" />
                    </asp:Panel>
</div>

In my css that part uses next coding:
.BottomBar {
    position: fixed;
    height: 100px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(105, 179, 231, 0.45); 
    text-align: left;
    align-self: baseline;
    align-items: baseline;
    vertical-align: bottom;
    box-shadow: -0px -3px 20px #8C8279;
   
}

Within that part I add an asp Panel (Fieldset with legend)
.searchBar {
   display: block;
   left: 10px;
   right: 10px;
   bottom: 30px;
   position: absolute;
}

That block is working too. From left to right I see the panel in screen.

Within the panel I want a textbox from left to right - 150px and in the last 150 px a want a Button.

for the searchbox:
input[type=search] {
    left: 0px;
    right: 150px;
    position: relative;
    display: inline-block;
    
}

.searchButton {
    display:inline-block;
    right: 20px;
    position:fixed;
}


And now the question. Why does the size of the TextBox is 175px while I set that value nowhere......

What I have tried:

I have tried the Flex solution as found on several places on the WWW. I cannot get that to work.
Posted
Updated 15-Mar-18 9:40am
Comments
Laxmidhar tatwa technologies 15-Mar-18 8:59am    
Set width of div and panel

1 solution

As far as I can see, since the box has relative positioning, setting either left or right simply moves the element relative to its default position. Setting both at the same time has no effect.

If you only need to support modern browsers (namely: not IE10 or below), you can use Flexbox:
ASP.NET
<div class="BottomBar">
    <asp:Panel runat="server" ID="pnlSearch" GroupingText="Search" CssClass="searchBar">
        <div>
            <asp:TextBox runat="server" ID="txtSearch" TextMode="Search" />
            <asp:Button runat="server" ID="btnSearch" Text="Zoek" CssClass="searchButton" />
        </div>
    </asp:Panel>
</div>
CSS
.searchBar > div {
  display: flex;
}
.searchBar input[type=search] {
  flex-grow: 1;
}
.searchBar .searchButton {
  margin: 0 20px;
}
Demo[^]

EDIT:
Since ASP.NET adds the CSS class to a wrapper <div> rather than the <fieldset>, you'll need to modify the CSS slightly.
CSS
.searchBar div {
    display: flex;
}

Updated demo[^]
 
Share this answer
 
v2
Comments
Herman<T>.Instance 16-Mar-18 4:24am    
Hi Richard,

thanks for you solution, but it does not work. I don't know where it is coming from, but the texbox width = 173px. I do not set that value anywhere. Any idea's?

Using latest Chrome and IE 11
Richard Deeming 16-Mar-18 8:22am    
The demo link I provided works fine for me in Firefox 59, Chrome 64, Edge and IE11.
Herman<T>.Instance 17-Mar-18 5:10am    
I have seen the demo and it works. IS asp.net interfering in the translation to HTML?
Richard Deeming 17-Mar-18 8:05am    
It should be generating output similar to the HTML in the demo, but you can use your browser's "view source" option to look at the rendered output and compare.

You can also use the developer tools to see if there are any other styles being applied which might override the CSS.
Herman<T>.Instance 28-Mar-18 18:59pm    
I found the problem.
Asp.Net sets the css class on the panel (=div) and not on the fieldset.

<div class="marinBottomBar">
<div id="pnlSearch" class="searchBar">
<fieldset>
<legend>
Search
</legend>
<div>
<input name="ctl00$txtSearch" type="search" id="txtSearch" />
<input type="submit" name="ctl00$BtnSearch" value="Zoek" id="BtnSearch" class="searchButton" />
</div>

</fieldset>
</div>


How can I fix that

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900