I am working on a project in which the navbar contains a search input field and button to perform the search. In mobile view, this inline form will be inside the toggle section (I don't know if this is the correct term for this, but the search form will appear when the burger icon is clicked). When the screen width is smaller than 575px, the search input field height becomes bigger than the button height.
The following 2 screenshots demonstrate what I am getting:
in mobile view
in desktop view
I used bootstrap 5 and font awesome.
This is the code I wrote:
<div class="col-xs-3">
<form class="form-inline my-2 my-lg-0 input-group">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="icon">
<i class="fas fa-search"></i>
</span></button>
</form>
</div>
How can I make the search button and input field have the same height in mobile view?
The problem is caused by the button top and bottom margins. Using classes my-sm-0 my-2 means that there will be top and bottom margins on mobile only.
Change this...
<button class="btn btn-outline-success my-sm-0 my-2" type="submit">...</button>
...to this.
<button class="btn btn-outline-success" type="submit">...</button>
See the snippet below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="col-xs-3">
<form class="form-inline my-2 my-lg-0 input-group">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">
<span class="icon">
<i class="fas fa-search"></i>
</span></button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
Related
I was trying to create a login form inside a modal like shown here (https://codepen.io/skcals/pen/bxdpaN).
However when I put this same code on my own website here is how it renders :
Has some one ever met the same issue ? And knows how to solve it ?
This is my html head were materialize css is included :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
And this is the code of my login form
<div id="login-modal" class="modal">
<h5 class="modal-close" style="color:black;">✕</h5>
<div class="modal-content center">
<h4>Se connecter</h4>
<br>
<form action="#">
<div class="input-field">
<i class="material-icons prefix">person</i>
<input type="text" id="name">
<label for="name">Username</label>
</div>
<br>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" id="pass">
<label for="pass">Password</label>
</div>
<br>
<div class="left" style="margin-left:20px;">
<input type="checkbox" id="check">
<label for="check">Remember Me</label>
</div>
<br>
<input type="submit" value="Login" class="btn btn-large login-btn">
</form>
</div>
</div>
I used your code in my project and it worked fine!
The only thing I can think off is using the newest version of JQuery:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
In the meantime, I've solved my own issue by moving the login div somewhere else. Previously it was inside my navbar menu and I think that is was causing the display issue.
There is just one last thing, the remember me check box doesn't show up ...
I would like to have icons instead of text on the submit buttons in the forms of my website based on w3.css.
I can easily add icons to other buttons but not to the submit buttons.
This is how far I could come:
The blue "save" button is the submit one. The green cancel button is a separate button that provides me a way to "cancel" (go back) via an href. I would like the submit button to look like the green save button, but alas I haven't found a way to replace the "save" text with a save icon (with no text).
I'm using google material icons but could use FontAwesome as well. Here's my html code:
<html>
<title>FPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<header class="w3-container w3-blue">
<h1>Test</h1>
</header>
<div class="w3-bar w3-gray">
<i class="material-icons">home</i></button>
</div>
<br>
<form class="w3-container w3-card-8" action="/test" method="post">
<label class="w3-text-blue"><b>Test ID</b></label>
<input value="" name="test1" class="w3-input w3-border">
<br>
<label class="w3-text-blue"><b>Test Description</b></label>
<input value="" name="test2" class="w3-input w3-border">
<br>
<input class="w3-btn w3-blue" type="submit" value="save">
<i class="material-icons">save</i>
<i class="material-icons">cancel</i>
</form>
</div>
</body>
</html>
Any suggestons will be welcome :-)
Replace
<input class="w3-btn w3-blue" type="submit" value="save">
with
<button type="submit" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></button>
You can use button for that, just wrap it in form and add action="#" to go to your page.
<form action="gothere.html">
<button type="submit" class="w3-btn w3-blue">
<i class="fa fa-id-badge" aria-hidden="true"></i>
</button>
</form>
I have an issue with adding glyphicon icon to a submit button. Once I try it with "a" tag, the action did not work when I press the button. So how do I do it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="<%=Const.ActionURIs.INSTRUCTOR_COURSE_STUDENT_LIST_DOWNLOAD%>" style="display:inline;">
<input id="button_download" type="submit" class="btn btn-primary"
name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>"
value=" Download Student List ">
<input type="hidden" name="<%=Const.ParamsNames.USER_ID%>" value="${data.account.googleId}">
<input type="hidden" name="<%=Const.ParamsNames.COURSE_ID%>" value="${courseDetails.course.id}">
</form>
</body>
</html>
Use a <button> tag instead of an <input> tag. Change your button like this:
<button type="submit" class="btn btn-primary" id="button_download" name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
The reason it doesn't work is given on Bootstrap website.
Don't mix with other components : Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
Working example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
</form>
I want to make this page fill out the mobile screen so buttons and text maximizes on this template.
<template name="adminClub">
<div class="container">
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</template>
I would like i to look like this (without zomming)
And not like this.
Now the div seem to fill out to much of the page with. I have installed twbs:bootstrap 3.3.6.
Assuming that you know how to update the <head>...</head> section in your html in meteor, add the following in your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Also I noticed you're html structure is a bit incorrect for bootstrap. Try something like this and see if you get any luck:
<template name="adminClub">
<div class="container">
<div class="row">
<div class="col-xs-12>
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</div>
</div>
</template>
Change you class="btn btn-info btn-lg" by class="btn btn-large btn-info" and so the entire width of mobile extends
you also can insert query media to set the CSS in mobile mode
Example:
#media (max-width: 767px){
}
Bootstrap
I'm new to bootstrap & its glyphicons are not working for me. After I've inspect the code, font-family of glyphicon-user was "Helvetica Neue",Helvetica,Arial,sans-serif & not Glyphicons Halflings. Am I missing something or do i need to change the css file.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
</body>
</html>
You need to add the class glyphicon.
So your span should actually be:
<span class="glyphicon glyphicon-user"></span>
As shown in the documentation: http://getbootstrap.com/components/#glyphicons-how-to-use
It's not enough to name the glyph, you have to use the class glyphicon too.
<span class="glyphicon glyphicon-user"></span>
Also, beware if you are using this in Opera mobile emulator. It doesn't support these fonts properly so you'll get a blank square.
Follow the steps to work Glyphicons icons in your boostrap project:
add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample
<span class="glyphicon glyphicon-user"></span>
Thanks!