I can't get list-style-item to apply to my UL in chrome even though I'm setting display to list-item and suffixing with !important. I'm using Angular and bootstrap and am applying my CSS as the last <link> in the <head> - here's the HTML before Angular applies it's repeater:
<ul class="shipping-list">
<li ng-repeat="todo in todos">
<select ng-model="todo.country">
<option>Canada</option>
<option>United Kingdom</option>
<option>United States</option>
</select>
<input type="text" ng-model="todo.text" ng-required="true">
<i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
</li>
<li>
<select ng-model="todoCountry">
<option>Canada</option>
<option>United Kingdom</option>
<option>United States</option>
</select>
<input type="text" ng-model="todoText" size="30" placeholder="$shipping">
<button class="btn btn-primary" ng-click="addTodo()">Add</button>
</li>
</ul>
HTML after Angular applies it's repeater - Providing for completeness although I'm pretty sure this is not related to Angular use:
<ul class="shipping-list">
<!-- ngRepeat: todo in todos -->
<li ng-repeat="todo in todos" class="ng-scope">
<select ng-model="todo.country" class="ng-pristine ng-valid">
<option value="Canada">Canada</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
<input type="text" ng-model="todo.text" ng-required="true" class="ng-pristine ng-valid ng-valid-required" required="required">
<i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
</li><!-- end ngRepeat: todo in todos -->
<li ng-repeat="todo in todos" class="ng-scope">
...
</li>
</ul>
CSS
//Shipping list
ul.shipping-list {
list-style-type: none !important;
color: red;
border: solid 1px red !important;
}
ul.shipping-list li {
display:list-item !important;
border: solid 1px red;
}
ul.shipping-list input {
color: red;
background-color: cyan;
border: solid 1px red;
}
The result is as follows - Note that list items still have bullets and there's no border on the UL:
I had a C# style comment just before the UL CSS:
//Shipping list <= BAD COMMENT
ul.shipping-list { ... }
Removing the comment fixed the problem
ul.shipping-list { ... }
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 have to align the fields(right) as shown in below image.Here is my code built in Angularjs using label tag for all the legends in form and i styled using CSS. How to correct the alignment, so that i can submit this to higher officials?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title> SAP WORKBENCH </title>
<style>
body{
background-color: lightgray;
margin-left: 500px
}
.option{
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button{
width: 300px;
}
</style>
</head>
<h2>Password Reset</h2>
<body>
<div ng-app="">
<b></b>
<form>
<label>System:</label>
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<div ng-switch="myVar">
<label>Client:</label>
<select class="option" ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select class="option" ng-switch-when="QR9">
<option>500</option>
</select>
<select class="option" ng-switch-when="PR3">
<option>500</option>
</select>
<select class="option" ng-switch-default>
<option></option>
</select>
</div>
<br>
<label>User:</label>
<input class="option" type="text" placeholder="Enter User Id.."></input>
<br><br>
<label>New Password:</label>
<input class="option" type="password"></input>
<br><br>
<label>Re-Enter New Password:</label>
<input class="option" type="password"></input>
<br><br>
<input class="button" type="button" value="Reset">
</form>
</div>
</body>
</html>
Wrap each label + select into a separate div. Then give the parent container the properties display: flex, flex-direction: column, align-items: center.
Further tip: Try to avoid the <br > tags and work with margin-bottom. For this purpose also the new single <div> elements can be used.
It would be best if you use bootstrap to do this. It's much easier to get alignment done that way so please do use bootstrap. Also I have done a test code without bootstrap using display: flex;. Hope this helps your problem (I have not included any of your ngswitch statements here)
HTML
<h2>Password Reset</h2>
<body>
<div>
<b></b>
<form class="d-flex flex-row">
<div class="d-flex flex-column text-right mr-1">
<label class="margin-b">System:</label>
<label class="margin-b-7">Client:</label>
<label class="margin-b-7">User:</label>
<label class="margin-b-7">New Password:</label>
<label class="margin-b">Re-Enter New Password:</label>
</div>
<div class="d-flex flex-column">
<div class="margin-b">
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
</div>
<div class="margin-b">
<select class="option">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
<div class="margin-b">
<input class="option" type="text" placeholder="Enter User Id.."></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="button" type="button" value="Reset">
</div>
</div>
</div>
</form>
</div>
</body>
CSS
body {
background-color: lightgray;
}
.option {
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
width: 300px;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.text-right {
text-align: right;
}
.mr-1 {
margin-right: 1rem;
}
.margin-b {
margin-bottom: 5px;
}
.margin-b-7 {
margin-bottom: 7px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/mhp6uksd/
I want to use a form like in the code is from bootstrap but i want to change the select icon/dropdown icon to fa-chevron-down.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<div class="form-group">
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
</div>
</div>
</div>
</div>
Here's a solution that uses font-awesome's fa-chevron-down natively (without using an image). It does require that you add a font-awesome tag to your markup, but it's fairly clean.
/* remove the original arrow */
select.input-lg {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
/* no standardized syntax available, no ie-friendly solution available */
}
select + i.fa {
float: right;
margin-top: -30px;
margin-right: 5px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: #fff;
padding-right: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<div class="form-group">
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</div>
</div>
</div>
This is a solution based in the solution above (Woodrow Barlow), with light improvements
/* remove the original arrow */
select{
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-color: #92ceea!important;
}
select::-ms-expand {
display: none;
}
select + i.fa {
float: right;
margin-top: -26px;
margin-right: 10px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: transparent;
color:black!important;
padding-right: 5px;
}
select option{
padding-right: 21px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control">
<option value="">select_option</option>
<option value="1">Opção1</option>
<option value="2">Opção2</option>
</select>
<i class="fa fa-chevron-down"></i>
Browser compability
Safari 5.1.7 | IE9 | Firefox | Google Chrome
Note
In IE9 fa arrow is in front
You have to add a CSS file (that you link in the head part of the page) and to specify for this class a background image :
.row > .col-sm-6 > form-group > .form-control-input-lg
{
background: url(images/example.gif) no-repeat scroll 0px 0px;
padding-left:0px;
}
This css wil add a background with your image and after you only have to modify the padding and the position of the background by the ones you want to have the glyphicon in your control.
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.
Below is an entire test page that I'm working on (I realize that it is still ugly and cluttered). My issue is with the ul class="dropdown". I'm intending on it being a replacement for a SELECT so I can style it (again, not done yet). However, I cannot seem to position it where I want it. If you look at this page in FF3.5, that is how I want it to be positioned. However, in IE7, it is pushing the UL onto the next line instead of butting up against the label. I've tried numerous hacks that I've found online and none seem to help. What am I missing here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Radix Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:1em;
font-family:arial,sans-serif;
}
.user-form li
{
background: #fff none no-repeat bottom right;
border: 1px solid #000;
margin: 0;
padding-right: 35px;
text-align: right;
}
.user-form li label
{
background: #fff;
border: 1px solid #333;
display: -moz-inline-stack; /* Support below FF3 */
display: inline-block; /* Used only to set width */
padding: 1px 0;
width: 10em;
}
.dropdown
{
border: 1px solid #f00;
width: 20em;
padding: 0;
margin: 0;
display:inline-block;
}
.dropdown ,
.dropdown ul
{
list-style-type:none;
}
.dropdown li
{
text-align: left;
}
</style>
</head>
<body>
<form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php">
<fieldset>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/>
<ul class="user-form">
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label>
<input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/>
<ul class="dropdown">
<li>
Miss
</li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li>
</li>
<li>
Mister
</li>
<li>
Misses
</li>
<li>
Miss
</li>
<li>
Doctor
</li>
<li>
This is just a little test to see exactly how long this silly thing will make my option
</li>
</ul>
</li>
</ul>
<input name="name_prefix_value" value="Mr." type="hidden"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix">
<option value="0"/>
<option value="Jr.">Junior</option>
<option value="Sr.">Senior</option>
</select>
<input name="name_suffix_value" type="hidden"/>
</li>
<li class="invalid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/>
</li>
<li class="warning">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender">
<option value="0"/>
<option value="U">Unknown</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<input name="gender_value" type="hidden"/>
</li>
</ul>
<div class="form-actionbar">
<input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/>
<input name="form-draft" value="Draft" class="button-edit" type="submit"/>
<input name="form-submit" value="Submit" class="button-edit" type="submit"/>
<input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/>
<input name="form-suspend" value="Suspend" class="button" type="submit"/>
</div>
</fieldset>
</form>
</body>
</html>
Have you tried moving the hidden input field after the UL?
You can probably try putting <label> andin two separate`s in a table. Like this:
............
<fieldset>
<input id="Hidden1" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2"
type="hidden" />
<ul class="user-form">
<li class="valid">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:bottom">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">
Prefix:</label>
</td>
<td>
<ul class="dropdown">
<li>Miss </li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li></li>
<li>Mister </li>
<li>Misses </li>
<li>Miss </li>
<li>Doctor </li>
<li><a href="#">This is just a little test to see exactly how long this silly thing
will make my option</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<input value="Ms." id="Hidden2" name="name_prefix"
type="hidden" />
<input name="name_prefix_value" value="Mr." type="hidden" />
</li>
............
With IE7, you have to follow any element with the display: inline-block; css rule with a display: inline; in a subsequent rule, usually found in an "ie lt 7" stylesheet. Is that possibly what's going on here?