I have a form and I have it as a link on my navbar. I tried to add a button to it, but it looks huge, here's my form:
<btn class="btn btn-inverse pull-right">
<ul class="nav pull-right">
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding:17px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password"><br>
<button type="button" id="btnLogin" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</btn>
and my fiddle:
http://jsfiddle.net/kPNG7/
You have a lot of padding on it
.navbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
Reduce the padding down to padding: 2px 5px;
Your dropdown menu shouldn't be inside the button itself, but a sibling of it having the necessary attributes: http://getbootstrap.com/2.3.2/javascript.html#dropdowns
That, and you have nested dropdowns. You need to back up and rebuild a little more carefully.
Related
I need to get the menu item to remain highlighted when a user clicks on it, of each different page..? It must be CSS only.
CSS:
.topplinker span:hover, .index .shjem, .kontakt .skontakt, .byggdrifter .sbyggdrifter, .om .som {
background-color: #fffcd9;
border-radius: 0 10px 0 0;}
HTML:
<body class="index"><p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
So now the code depends on the body class to be unique for each page to work. But I wants it to be working without using the body class to highlight each menu item. Any suggestions..?
Best regards
use ul and li.
then use onclick function to make li active.
Try this one with CSS, If you click on the URL i just change color.
FYI, if pages loads while clicking those url means you have right based on Router URL only.
#toggle1:checked ~ .control-me,
#toggle2:checked ~ .control-me,
#toggle3:checked ~ .control-me,
#toggle4:checked ~ .control-me {
background: violet;
}
.menuitem {
visibility: hidden;
}
<body class="index">
<p class="topplinker">
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle1" class="menuitem" />
<span class="control-me shjem">Hjem</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle2" class="menuitem" />
<span class="control-me skontakt">Kontakt</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle3" class="menuitem" />
<span class="control-me sbyggdrifter">Byggdrifter</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle4" class="menuitem" />
<span class="control-me som">Om</span>
</label>
</a>
</p>
</body>
CSS only solution:
.topplinker {
display: flex;
justify-content: space-evenly;
}
a {
text-decoration: none;
color: black;
}
a:active, a:hover {
color: green;
font-weight: bold;
}
/* EDIT */
a:visited {
color: blue;
}
<p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
See for more selectors: https://www.w3schools.com/css/css_link.asp
I'm creating a Sign in/up form. If the login form is displayed then there is a button below Sign up and if you click it then the login form fades and the Sign up form fades in. Then once the Sign up form is displayed clicking Sign in would make the login form be displayed.
However, it only works one time. My client sent me a website template they purchased and wanted me to modify. There are custom CSS files thousands of lines long and it came with it's own version of Bootstrap (CSS and JavaScript) and I'm not sure how they may have modified it. I'm hoping the problem is me and not the template because that would be a nightmare.
Here is my login form/dynamic pill:
<!-- SIGN IN/UP FORM -->
<div class="form-custom text-center container bg-white">
<img src="images/logo.png" alt="">
<!-- TAB CONTENT -->
<div class="tab-content">
<div id="signin" class="tab-pane fade in active">
<!--SIGN IN-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN IN-->
</div>
<div id="signup" class="tab-pane fade">
<!--SIGN UP-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="text" name="first_name" placeholder="First Name">
<input class="form-style" type="text" name="last_name" placeholder="Last Name">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN UP-->
</div>
</div>
<!-- TAB CONTENT -->
<ul class="nav nav-pills">
<div class="container">
<div class="d-flex flex-row justify-content-center">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</div>
</div>
</ul>
</div>
<!-- SIGN IN/UP FORM -->
And then my own style classes compiled from Sass:
.form-custom {
position: absolute;
top: 35vh;
left: calc(90vw - 475px);
width: 475px;
z-index: 5000;
}
#media (max-width: 575.98px) {
.form-custom {
width: 420px;
left: calc(90vw - 420px);
}
}
#media (max-width: 500px) {
.form-custom {
width: 375px;
left: calc(90vw - 375px);
}
}
#media (max-width: 400px) {
.form-custom {
width: 275px;
left: calc(90vw - 275px);
}
}
.form-style {
display: block;
width: 100%;
border-top: 0px;
border-right: 0px;
border-left: 0px;
font-size: 1rem;
}
.form-style:focus {
outline-color: transparent;
}
.btn-sign {
display: inline;
margin: 0px 20px 0px 20px;
border-radius: 0px;
width: 180px;
}
#media (max-width: 575.98px) {
.btn-sign {
width: 162px;
}
}
#media (max-width: 500px) {
.btn-sign {
width: 126px;
}
}
#media (max-width: 400px) {
.btn-sign {
width: 90px;
}
}
Any help would be much appreciated. If additional details are needed please let me know. Thanks.
I commented out the container and flex div's and that fixed the problem.
<ul class="nav nav-pills">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</ul>
In the following code, I have a bootstrap navigation. On the right, I have a login form and a sign up form. On successful login, the form and sign up disappears and profile and signout are displayed
login is a <button>, signup, profile and signout are <a>
Following is the css I am applying to both <button> and <a>
.content-div__button--blue{
background-color: #4da3f8;
border:none;
color:white;
border-radius: 8px;
width:100px; /* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
My issue is that the text within <a> is not in the center but it is for the <button>. If I change the <a> to <button> then the text gets in the center. Why is the text not getting centrally aligned when I use <a>?
<ul class="navbar-nav navbar-right">
<ng-container *ngIf = "userNotloggedIn">
<li >
<form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
<label for="username" class="control-label required sr-only">Username</label>
<input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
<app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
<label for="password" class="control-label required sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
<app-show-errors [control]="loginForm.controls.password"></app-show-errors>
<button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>
</form>
</li>
<li class="nav-item" >
<a class="nav-link" [routerLink]="signupRouterLink" id="signup-link" class="btn content-div__button--blue btn-sm">Sign Up</a> <!-- Sign Up is not in center but if I change <a> to button then the text comes in center -->
</li>
</ng-container>
<ng-container *ngIf="!userNotloggedIn" >
<li class="nav-item" >
<a id="profile-link" [routerLink]="" (click)="onProfileClick()" class="btn content-div__button--blue btn-sm">My Profile</a> <!-- My Profile is not in center but if I change <a> to button then the text comes in center -->
</li>
<li class="nav-item" >
<a [routerLink]="" id="signout-link" (click)="onSignoutClick()" class="btn content-div__button--blue btn-sm">Sign out</a> <!-- Sign Out is not in center but if I change <a> to button then the text comes in center -->
</li>
</ng-container>
</ul>
a is an inline-element where centering won't have any effect since it's only as wide as its contents (regardless if there's a widthsetting or not). Add display: inline-block to that CSS rule, that should solve your problem by making the a tag an inline-block which takes on the defined width.
I'd like something like the JQuery Mobile Flip Toggle Switch, but just that, then I don't want to load all the JQuery Mobile library into my project.
Do you know how to do a nice CSS toggle buttons (more of 2 buttons) like these? I didn't find anything.
Thanks in advance!
PS: I don't care about compability with IE.
Did something quickly. Hope it will help you.
ul.tab {
list-style-type:none;
margin: 0;
padding:0;
border-radius: 5px;
}
ul.tab li {
float: left;
padding: 0;
}
ul.tab li label {
background: white;
padding: 6px;
border: 1px solid #ccc;
display: inline-block;
}
ul.tab li input[type="radio"] {
opacity: 0;
width:1px;
height:1px;
}
ul.tab li input[type="radio"]:checked ~ label {
background: red;
color: white;
}
<ul class="tab">
<li>
<input id="tab1" checked="checked" type="radio" name="tab" />
<label for="tab1">Basic</label>
</li>
<li>
<input id="tab2" type="radio" name="tab" />
<label for="tab2">Options</label>
</li>
<li>
<input id="tab3" type="radio" name="tab" />
<label for="tab3">Methods</label>
</li>
<li>
<input id="tab4" type="radio" name="tab" />
<label for="tab4">Events</label>
</li>
</ul>
The Bootstrap .dropdown-menu.pull-right selector doesn't seem to work (the code is in navbar.less, lines 330 to 341).
As you can see on this screenshot, the up caret is not aligned to the right.
My dropdown-menu class :
<ul class="dropdown-menu pull-right">
When I change line 286 to
right:10px;
it works fine.
Any idea on how to fix this ?
Here is my html code:
<div id="USE_dropdown_signin" class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Sign in
</a>
<ul class="dropdown-menu pull-right">
<form action="" method="post" accept-charset="UTF-8">{% csrf_token %}
<input id="USE_signin_username" type="text" name="signin[username]" size="30" placeholder="User Name"/>
<input id="USE_signin_password" type="password" name="signin[password]" size="30" placeholder="Password"/>
<input id="USE_signin_remember_me" type="checkbox" name="signin[remember_me]" value="1" />
<label id="USE_signin_remember_me_label" class="string optional" for="signin_remember_me"> Remember me</label>
<input id="USE_signin_submit" class="btn btn-primary" type="submit" name="commit" value="Sign in" />
</form>
</ul>
</div>
From your screenshot, I would assume that you have used .btn-group class to make your white log in button.
Assign "pull-right" class to the div element containing btn-group class instead of the ul element.
Correct Html markup
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
Based on what I have analyzed on the twitter bootstrap, you will require the following css to work.
.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.pull-right { float: right; }
Here is what I didn't understand:
1) The boostrtap selector in navbar.less line 329-330
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {}
didn't match my dropdown-menu because I don't have the parent .nav class in my hierarchy.
2) My .dropdown-menu has the class .pull-right, and this doesn't match:
.navbar .dropdown-menu:before .pull-right {
left: auto;
right: 9px;
}
but this does:
.navbar .pull-right .dropdown-menu:before {
left: auto;
right: 9px;
}
3) I couldn't debug correctly until I removed the -yui-compress option of the less compiler ;-)
Thanks for everything!