locked
issue in designig with bootstrap RRS feed

  • Question

  • User-1474096950 posted

    <div class="container" style="background-color: burlywood;"> <div class="col-md-3">

    Select Currency @Html.DropDownList("dd_gemlist", new List() { new SelectListItem {Text="INR", Value="1",Selected=true}, new SelectListItem {Text="$", Value="2"} , new SelectListItem {Text="@", Value="3"} } )

    </div> <div class="col-md-6"><form class="navbar-form navbar-right" role="search"> <div class="form-group input-group"><input class="form-control" type="text" placeholder="Search.." /> <button class="btn btn-default" type="button"> </button> </div> </form></div> <div class="col-md-3">Date : @DateTime.Now.ToLongDateString()</div> </div>

    // ------------ top //------ menu

    <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"><button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse"> </button> @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })</div> <div class="navbar-collapse collapse">

      <
    • @Html.ActionLink("Home", "Index", "Home")
    • @Html.ActionLink("About", "About", "Home")
    • @Html.ActionLink("Contact", "Contact", "Home")

    </div> </div> </div>

    //----------------- slider images

    <div class="container"> <div class="carousel slide" id="myCarousel" data-ride="carousel">

    <div class="carousel-inner" role="listbox"> <div class="item active">Image <div class="carousel-caption">

    Sell $

    Money Money.

    </div> </div> <div class="item">Image <div class="carousel-caption">

    More Sell $

    Lorem ipsum...

    </div> </div> </div> Previous Next </div> <div class="carousel slide" data-ride="carousel"></div> <div class="carousel slide" data-ride="carousel"></div> <div class="carousel slide" data-ride="carousel"></div> <div class="carousel slide" data-ride="carousel"> </div> <div class="carousel slide" data-ride="carousel"></div> <div class="carousel slide" data-ride="carousel"></div> <div class="carousel slide" data-ride="carousel"></div> </div>

    In above the above boot strap code the issues faced


    1) the TOP code need it above the menubar

    2) the TOP code is not aligned with the image slider container( it appears more left aligned). need it in alignment with the image slider div


    3) the positioning of all 3 elements of the div is not proper currently

    Saturday, May 2, 2020 7:18 AM

All replies

  • User303363814 posted

    Do you have a question?  It is nearly impossible to decipher what you have posted.  Please take a little time to format a clear question with the minimum code that shows your problem.

    PS - Don't forget to use the preview button to check that your post is as clear as it can possibly be. 

    Sunday, May 3, 2020 3:03 AM
  • User-1474096950 posted

    the html and the query got mixed up.

    edited it hope its clear

    Sunday, May 3, 2020 7:36 AM
  • User303363814 posted

    Can you slim this down so that you have a single issue?  You want "top code above menu bar".  Can you make a small example which illustrates the problem?  Show the html and show the page you are seeing.  If possible make a small mockup of how you want it to look.  I am not clear what is top code, what it is that you are seeing, how many screens you are showing or exactly what it is you want to achieve.

    One problem at a time, please

    Sunday, May 3, 2020 11:31 PM
  • User-1474096950 posted
    <div class="container" style="background-color:burlywood">
        <div class="col-md-3">
            <p>
                Select Currency
                @Html.DropDownList("dd_gemlist", new List<SelectListItem>()
                      {
                          new SelectListItem {Text="INR", Value="1",Selected=true},
                            new SelectListItem {Text="$", Value="2"} ,
                          new SelectListItem {Text="@", Value="3"}
    
                      }
                          )
            </p>
        </div>
        <div class="col-md-6">
    
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group input-group">
                    <input type="text" class="form-control" placeholder="Search..">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
        <div class="col-md-3"> Date : @DateTime.Now.ToLongDateString()</div>
    
    </div>//  need the output above the menubar

    // menubar code

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">c
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    

    the above <div> are in _layout.cshtml

    Monday, May 4, 2020 9:06 AM
  • User303363814 posted

    Make yourself a small example with all the unneeded stuff stripped away.  Save it as test.html and double-click to open it.  Does it look like you want?  Change the file, save, refresh browser (there are better ways to do this but simple works).

    Here is a sample to get you started

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <style>
          .top-gap { margin-top:4em;}
      </style>
    </head>
    <body>
      
        <div class="container" style="background-color:burlywood">
            <div class="col-md-3">
                <p>
                    Select Currency
                    <select>
                        <option>Currency 1</option>
                        <option>Currency 2</option>
                        <option>Currency 3</option>
                    </select>
                </p>
            </div>
            <div class="col-md-6">
        
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group input-group">
                        <input type="text" class="form-control" placeholder="Search..">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="col-md-3"> Date : Whatever</div>
        
        </div>//  need the output above the menubar
        <div class="navbar navbar-inverse navbar-fixed-top top-gap">
            <div class="container">c
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#">Home</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    Monday, May 4, 2020 11:14 PM
  • User1535942433 posted

    Hi svibuk,

    Accroding to your description and codes,I'm guessing that you want to show search textbox under the navbar menu,and the search icon in the right of search textbox.

    I suggest you could use container-fluid and set overflow auto to above the navbar menu.

    More details,you could refer to below codes:

        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.0.0.min.js"></script>
        <style>
            html, body {
                height: 100%; /*Fixes the height to 100% of the viewport*/
            }
    
            body {
                padding-top: 87px; 
                padding-bottom: 50px; 
            }
            .container-fluid {
                height: 100%; /*Sets the scrollable area to 100% of the viewport*/
                overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/
            }
        </style>
     <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <p>
                        Select Currency
                        @Html.DropDownList("dd_gemlist", new List<SelectListItem>()
                                      {
                                          new SelectListItem {Text="INR", Value="1",Selected=true},
                                            new SelectListItem {Text="$", Value="2"} ,
                                          new SelectListItem {Text="@", Value="3"}
    
                                      }
                                           )
                    </p>
                </div>
                <div class="col-md-6">
    
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group input-group">
                            <div class="row">
                                <div class="col-lg-10">
                                    <input type="text" class="form-control" placeholder="Search..">
                                </div>
                                <div class="col-lg-2">
    <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                                </div>
                            </div>
                           
                            
                        </div>
                    </form>
                </div>
                <div class="col-md-3"> Date : @DateTime.Now.ToLongDateString()</div>
            </div>
        </div>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, May 5, 2020 9:45 AM