I have a custom navbar(bootstrap) on my page.
<nav class='navbar fixed-top navCustom '>
<div class='navComp'>
<input class='dateStyle' id='dateChart' type='date' value='" . $now . "'/>
<button id='refreshBtn' class='refreshStyle' type='button' name='refresh'>Refresh</button>
<form style='display:inline' method='post' action=''>
<button id='logout' class='logoutStyle' type='submit' name='logout'>Log Out</button>
</form>
</div>
</nav>
Here is css of navCustom and navComp:
#media (min-width:600px) {
.navCustom{
justify-content: center !important;
}
}
.navCustom{
margin-top: -1px;
height: 33px;
white-space: nowrap;
}
.navComp{
position: absolute;
text-align: center;
border-style: solid;
border-color: #dadada;
border-width: 1px;
border-radius: 3px;
background-color: #fafafa;
padding-left:5px;
padding-right:5px;
box-shadow:0 0px 2px rgba(0, 0, 0, 0.1);
}
My problem is when the size of browser is thin.
The navbar overflow on the right margin of browser, but scrollbar don't appears.
The scrollbar appears only when divs with text Test overflow on the right margin.
Finally I figured out.
.fixed-top from Bootstrap has position: fixed which is the reason why scroll bar is not triggered by my element.
I fixed it by added position: sticky !important; into my .navCustom
That made me to change a little bit my css and structure, but at least I had obtained what I wanted.
Related
I am working on a TODO kind of web app. And I have an issue
<div class="todo-list">
<div class="item">
<p> Buy Raw materials </p>
<form action="/" method="POST">
<button type="submit">X</button>
</form>
</div>
<div class="item">
<p> Cook food </p>
<form action="/" method="POST">
<button type="submit">X</button>
</form>
</div>
<div class="item">
<p> eat food </p>
<form action="/" method="POST">
<button type="submit">X</button>
</form>
</div>
<form action="/" method="post" class="add-item">
<input type="text" name="newItem" id="newItem" placeholder="New item" autocomplete="off">
<button type="submit">Add</button>
</form>
There are 2 components first is the the div with class todo-list and second is a form.
now whenever I type something in the input feild and click add, It should be added as item in todo-list div. Which I have done using node and express
Now the issue is since this is dynamic, Initially there will be no Items in div with class todo-list and the form with input will be on the top. And as we go on adding items, They should be added into the todo list div. And it so happens that after a certain number of items added, the height of the todo list increases and crosses the viewport height.
But what i want is, until there are 5 items in the todo-list it is fine, But as soon as 6th item gets added the scroll bar should appear.
So i wrote the following CSS code for todo-list div
.todo-list{
margin-top: 1rem;
background-color: #f1f1f1;
width: 100%;
height: 425.200px;
border: 2px solid grey;
border-radius: 16px;
box-shadow: 2px 2px 4px 1px gray;
overflow: auto;
}
But the overflow property doesnt work untill a height property is given to that div.
But if a certain height(say height equal to that of 5 items is given to the todo list div) then this problem occurs:
That is the height of the last element if way more than it should be!..
Can some one please help
try providing the max height property
.todo-list {
margin-top: 1rem;
background-color: #f1f1f1;
/* change this */
width: 100%;
max-height: 425.200px;
border: 2px solid grey;
border-radius: 16px;
box-shadow: 2px 2px 4px 1px gray;
overflow: auto;
}
You need to change your height styling from a fixed number to percentage.
If you think your bottom form element is too close to your search bar, give it some margin-bottom
.todo-list {
margin-top: 1rem;
background-color: #f1f1f1;
/* change this */
width: 100%;
height: 425.200px;
border: 2px solid grey;
border-radius: 16px;
box-shadow: 2px 2px 4px 1px gray;
overflow: auto;
}
I created a to-do list with jQuery (see CodePen). I wanted the '+' button to be joined with the input box in which you add a to-do list item and for the two to be the same height.
Getting the button to match took a lot of trial and error with the padding. Setting its height to 1.5em to match the input box didn't work, even after setting it to box-sizing: border-box.
Is there a more efficient, accurate way to achieve this?
Here is the relevant CSS:
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
height: 1.5em;
}
.button {
/* Needed to display button next to input box */
display: inline-block;
vertical-align: bottom;
box-shadow: inset 0px 1px 0 0 #fff;
/* Starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
font-size: 0.7em;
font-weight: bold;
/* First value sets top and bottom padding; second value sets right and left */
padding: 0.53em 0.7em;
text-shadow: 0 1px #fff;
text-align: center;
color: grey;
}
And HTML:
<form name="listForm">
<input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>
If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
</div>
If you want to implement it yourself, you need to put the input and button inside the form. To set their height to be equal, you can set the height of the button to be equal to the height input (1.6 em) + padding of the input (1px top + 1px bottom = 2px):
input[type="text"] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
}
button.button {
margin-left: -30px;
height: -webkit-calc(1.6em + 2px);
height: calc(1.6em + 2px);
width:25px;
color: grey;
border:none;
}
<form name="listForm">
<input type="text" name="listItem" placeholder="Add new">
<button class="button">+</button>
</form>
reduce the width of the input by 1 em. And set button to float right, It should work.
I am struggling with getting a navbar to contain:
My brand image
A long search bar and button to submit filling the entire navbar height
Enough room at the end of #2 for one more button of the same height
... all in one line, without collapsing.
However, for the life of me, I cannot get anything to stay on the same line as the nav bar after I place the search bar from #2. I have tried putting the search form in a column as in below, using display: inline in different places, navbar-right, etc.
Please let me know if this is an easy fix. I'd like to have some control over how long the search field is as well.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
<nav class="nav" id="navigationBar">
<a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small">BRAND IMAGE</a>
<div class="row">
<div class="col-sm-10">
<form>
<div class="input-group" id="searchBar">
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
<span class="input-group-btn">
<button type="button" id="searchButton" onclick="this.blur();"><i class="flaticon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-sm-2">
<!-- HERE is where I want to place another button to fill the remaining space in the nav bar -->
</div
</nav>
I'm rewriting my original answer, because I made a couple of stupid assumptions, and didn't provide anything very helpful using the provided code.
As mentioned by others in previous comments, it might be most helpful to better understand grid layouts and how they work in a larger context.
Bootstrap has some great features specifically for grouping form elements and controls together, specifying how you'd like them to layout.
Read more on that, here
This snippet uses the grid system to divide the nav element into 12 columns, and uses the col-[size]-[width] classes to define how many "columns" each element should occupy, and at which resolutions those rules should apply.
For example, you could use col-lg-4 along with col-xs-2 within the class attribute to tell that element to act differently at larger and smaller resolutions.
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices. Therefore, e.g. applying any .col-md-* class to an element
will not only affect its styling on medium devices but also on large
devices if a .col-lg-* class is not present.
The documentation specifies how these work together, and gives lots of examples with #media queries, so I'd recommend giving it a thorough read.
You may also want to look at using the navbar controls to better align form controls within the nav element itself.
You can find some great examples of that, here.
Lastly, if you'd like to play with this example, here's the codepen.
Hope this answer helps you more than my last one did.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#another_button {
height: 62px;
}
.search_bar_button {
height: 62px;
}
#searchBar input {
width: 100%;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
font-size: 10px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
.another_button {
width: 100%;
height: 63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="nav navbar navbar-default col-xs-12" id="navigationBar">
<div class="col-xs-2">
<a class="navbar-brand" href="/">
<img src="mylogo.png" class="logo-small" />
BRAND IMAGE
</a>
</div>
<form class="col-xs-6">
<div class="input-group" id="searchBar">
<span class="input-group-btn">
<button id="searchButton" class="btn search_bar_button" type="button">Go!</button>
</span>
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
</div>
</form>
<div class="input-group col-xs-4">
<span id="another_button" class="input-group-btn">
<button class="another_button btn btn-secondary" type="button">Button 2</button>
</span>
</div>
</nav>
i have a theme based on bootstrap 2.2
Now i am customizing it.
When my menubar is scrolled to the top a menubar appears at the top.
When you click on the search bar it expands to a with of 200px ... and slides over the menu bar.
Now i want the same for the normal menubar. But when it gets to long it jumps under the menubar in stead of sliding over it.
How can i change that?
HTML code of the right search bar:
<div class="container">
<div class="row">
<div class="span12">
<nav>
<div id="megamenu">
</nav>
</div>
<div class="spy-left">
<div class="spy-right">
<div class="spyshop">
<div class="shoppingcart">
</div>
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
</form>
</div>
Here is the html code of the menubar which has to be changed:
<div class="container">
<div class="wrapper_w">
<div class="row">
<div class="span12">
<div class="menufront">
<div class="spy-left">
<nav>
<ul class="nav nav-list hidden-desktop">
<div id="megamenu">
<ul id="nav">
...
<div id="menufront" class="pull-right padding-1">
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
<i class="icon-search-2 icon-large"></i>
</button>
</form>
</div>
etc ...
Piece of the css:
#spy .form-search input.search-query:focus {
width: 200px !important;
}
#spy .form-search input.search-query {
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
float: left;
font-size: 12px;
height: 24px;
padding-left: 44px;
transition: all 0.5s ease 0s;
width: 49px;
}
#menufront .form-search input.search-query:focus {
display: inline-block;
float: left !important;
visibility: visible !important;
width: 140px !important;
}
#menufront .form-search input.search-query {
width: 100px !important;
}
Who can help me?
Use absolute positioning; then use property values of top , right and z-index to get desired effect.
you-search-bar {
position: absolute;
right: 0; /* adjust as needed */
top: -25px; /* Adjust as needed to get the number that will keep it above the menu */
z-index: 999; /* Whatever number that keeps it above the menu */
}
Note: As mentioned by Shipow, the parent needs to have a position value of relative.
You'll need to set the float rule in the CSS for that element to:
float: clear
You may have to do some other positioning to get things to look correct after that, but it's difficult to be more specific with seeing the code in action.
You can move it via the position: relative in your css
#spy .form-search input.search-query:focus {
width: 200px !important;
position: relative;
top: 30px;
}
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg