I'm trying to display the following code. It's working fine in Chrome and Safari, but not working properly in Firefox. The code link: http://jsfiddle.net/nvarun123/fv4jxo4t/26/
Html code:
<div>
<a>
<button (click)="decrement()" class="btn btn-primary" style="float: left;">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>
CSS code:
div {
position:relative;
border: 1px solid #CACEDB;
width: 162px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:3px;
}
input {
text-align: center;
height:100%;
width:100%;
border:none;
}
input:focus {
outline: none;
}
button {
height:100%;
border:none;
}
button:hover {
background-color: green;
}
button:active {
background-color: #015191;
}
Here a trick to vertically center content in an html element.
Vertical aligns are always tricky with CSS, but this snippet will allow you to do it easily for a single line of text. Basically we use the line-height property to put an equidistant space at the top and bottom of the text. To make this work, the line height value needs to be the same as the height of the html element containing the text.
Check this
p {
border: red dotted thin;
height: 100px;
text-align: center;
background: black;
color: white;
/* magic line */
line-height: 100px;
}
<p>
One Liner
</p>
div {
position: relative;
border: 1px solid #CACEDB;
width: 500px;
height: 500px;
overflow: hidden;
white-space: nowrap;
border-radius: 5px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<a>
<button type="button" (click)="decrement()" class="btn btn-primary" style="width:50px;height:50px;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</a>
<span style="width:100%">1</span>
<a>
<button type="button" (click)="increment()" class="btn btn-primary" style="width:50px;height:50px;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</a>
</div>
</body>
</html>
check out the snippet
Is this the way you want it?
You can try to style the input tag to set the value at the center by using text-align: center; this worked for me with your code.
div {
position:relative;
width: 160px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:5px;
}
input{
text-align: center;
}
input:focus {outline:none;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<a>
<button type="button" (click)="decrement()" class="btn btn-primary" style="height:100%; border:none;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</a>
<input type="text" style="width:45%;border:none;">
<a>
<button type="button" (click)="increment()" class="btn btn-primary" style="height:100%;float: right; ">
<span class="glyphicon glyphicon-plus"></span>
</button>
</a>
</div>
</body>
</html>
Related
I recently create a little project to create a simple calculator. however, I can't connect my HTML into the CSS file. I have check the location of the file and the name of the css everything is correct. anyone know why it can't link up?
I named my html file as index.html and I named my css file as stylsheet.css
here is my file location:
[screenshot of my file location][1]
here are the codes I use in this project
the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kalkulator</title>
<link rel="stylesheet" type="css" href="stylesheet.css">
</head>
<body>
<div class="calculator">
<input type="text" name="calculator-screen" value="0" disabled>
<div class="calculator-keys">
<div class="row">
<button class="all-clear">AC</button>
<button class="precentage">%</button>
<button class="operator" value="/">รท</button>
</div>
<div class="row">
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="operator" value="*">&time;</button>
</div>
<div class="row">
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="operator" value="-">-</button>
</div>
<div class="row">
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="operator" value="+">+</button>
</div>
<div class="row">
<button class="number zero-btn" value="0">0</button>
<button class="decimal" value="0">.</button>
<button class="equal-sign">=</button>
</div>
</div>
</div>
<script type="javascript" src="script.js"></script>
</body>
</html>
The CSS code:
.calculator {
text-align: center;
margin: 0 auto;
padding-top: 200px;
width: 400px;
}
.calculator-screen {
width: 100%;
height: 100px;
background-color: #252525;
color: #fff;
text-align: right;
font-size: 36px;
border: none;
padding: 0 20px;
box-sizing: border-box;
}
.calculator-keys {
width: 100%;
}
.row {
display: flex;
}
button{
height: 80px;
background-color: gray;
border: 1px solid black;
font-size: 32px;
color: #fff;
width: 25%;
outline: none;
}
all-clear, .zero-btn {
width: 50%
}
.operator, .equalsign {
background-color: orange;
}
button:hover {
background-color: darkgrey;
}
.operator:hover, .equalsign:hover {
background-color: darkorange;
}
any help is a welcome, thank you~
Solved! it looks like I use the incorrect code
the incorrect code:
<link rel="stylesheet" type="css" href="stylesheet.css">
it should be:
<link href="stylesheet.css" rel="stylesheet">
still not sure why, but it might be caused due to different type of html version I use (assumption)
EDIT:
For some of you that said it makes no different.
this is the web view if I use the supposedly the "wrong" line of html:
<link rel="stylesheet" type="css" href="stylesheet.css">
This is the web view if I use the correct line of html :
<link href="stylesheet.css" rel="stylesheet">
As I said, I don't know why but it shows a plain html if i'm using the code line based on the picture 2. but it shows the css file if I'm using the code line based on the picture 3.
Hi guys I am using Bootstrap Collapse :https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
it is working perfect, but I have to add background and padding 10px and this breaks the accordion effect, it is someone know how to fix this?
if I remove the padding works perfect, but I need the padding.
thank you.
jsfiddle:https://jsfiddle.net/a759nymd/
$(document).click(function(e) {
if (!$(e.target).is('.collapse-logout')) {
$('.collapse').collapse('hide');
}
});
.collapse-logout {
background: black;
color: #27a0d7;
cursor: pointer;
border-radius: 5px;
height: 40px;
padding:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="user-logout">
<label class="" data-toggle="collapse" data-target="#demo">
Hi,<strong>${ username }<b class="caret"></b></strong>
</label>
<div id="demo" class="collapse collapse-logout">
<i class="fa fa-power-off" aria-hidden="true"></i>Logout
</div>
</div>
You can wrap the accordion content inside a div and then apply the padding to that inner div
$(document).click(function(e) {
if (!$(e.target).is('.collapse-logout')) {
$('.collapse').collapse('hide');
}
});
.collapse-logout {
background: black;
color: #27a0d7;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
.collapse-body {
padding:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="user-logout">
<label class="" data-toggle="collapse" data-target="#demo">
Hi,<strong>${ username }<b class="caret"></b></strong>
</label>
<div id="demo" class="collapse collapse-logout">
<div class="collapse-body">
<i class="fa fa-power-off" aria-hidden="true"></i>Logout
</div>
</div>
</div>
And the updated fiddle
https://jsfiddle.net/a759nymd/4/
I am trying to align an ionicon icon and text to its side in a vertical way inside a button using Bootstrap 3.
I want the text to be vertically aligned to the center of the button with the icon also vertically aligned.
The default seems to align the icon and the text using their lowest points.
My HTML is:
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
My CSS is:
.main-header .navbar .dropdown-menu li a.sign-out {
color: #fff !important;
vertical-align: middle;
}
.ion-fw {
width: 1.28571429em;
text-align: center;
}
My CSS targets the pair OK as their colors are correct. I have tried padding and margins on .menu-label but that moves the text and icon.
How do I adjust the text to the middle of the icon's height? Thanks!
Example:
Change this
.ion-fw {
width: 1.28571429em;
text-align: center;
}
to this
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
vertical-align works on elements in the same container and so must be applied to the contents...not the parent element.
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
This works for me:
.ion-fw {
display: inline-block;
vertical-align: bottom;
height: 1.4em;
font-size: 1.1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
I am using Bootstrap and I know how to make the buttons appear side by side but having issues achieving what I want.
When the buttons are side by side in a 100% width container everything is fine. However, if the second button is removed I would like the first button to fill 100%.
Is there a CSS only approach?
When the buttons are side by side in a 100% width container everything
is fine. However, if one of those buttons are gone I would like the
other button to fill 100%.
Is there a CSS only approach?
Yes. You can easily accomplish this with the flex-grow property of CSS Flexbox.
From MDN:
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up.
Basically, you can tell an element to take up all available width. So if there are two elements, they will share the space equally. If one element is removed, the other expands to fill the width.
Here's all the code you need to make this work:
HTML
<div id="container">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
CSS (relevant parts)
#container {
display: flex;
justify-content: space-around;
width: 100%;
height: 75px;
}
button {
flex-grow: 1; /* this one line tells button to stretch across all available width */
}
DEMO (click buttons for effect): http://jsfiddle.net/rjy6nvj2/1/
Note: Flexbox is supported by all major browsers, except IE 8 & 9.
CSS only solution would be to use only-child pseudo selector
* {
box-sizing: border-box;
}
.container {
width: 340px;
border: 1px solid rgba(0,0,0,0.1);
padding: 5px;
}
.btn {
margin: 0 5px 0 0;
padding: 4px 8px;
background: #5d4ca5;
color: #fff;
text-decoration: none;
text-align: center;
width:157px;
display: inline;
}
.container .btn:only-child {
width: 100%;
}
<div class="container">
<button class="btn">Button One</button>
<button class="btn">Button Two</button>
</div>
<div class="container">
<button class="btn">Button One</button>
</div>
See the working Fiddle here - http://jsfiddle.net/sjpx5c34/1/ (remove the second button and your only button will have 100% width.)
Trick named display:table-cell:
div { width:300px; border:1px solid; display:table; }
div > span { display:table-cell; border:1px solid red; width:50%; }
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>First</span>
</div>
Anthony Russo Hi there.
This code below will show how to first center what and when you need to center.
Because you have a reason why one button will be removed.
I set up a little sample jquery to remove the Second Button when you mouse over it, for this example.
When you mouse over, it also adds the class centerthis to the First Button to center it.
Hope this helps to get you started.
Updated
I see you have added to your post, so I have made added a small change to the my code.
When you have the second button removed, you also want the remaining button width to go 100%.
My code now does this for you too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Remove button and center</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
background-color: darkorange;
}
.block3 {
height: 40px;
width:550px;
padding-top: 3px;
background-color: blueviolet;
}
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.remove-on-hover {
display: none;
}
.change-width {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="col-sm-6 block3 centerthis">
<div class="col-xs-6 centerthis" >
<div type="text" id="firstbutton" class="col-xs-6 btn btn-warning">First Button</div>
<div type="text" id="whenchanged" class="col-xs-6 btn btn-warning">Second Button</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
jQuery(function () {
var myMenu = $('#whenchanged');
myMenu.mouseenter(function () {
$('#firstbutton').addClass("centerthis change-width");
$("#whenchanged").addClass("remove-on-hover");
});
})
</script>
</body>
</html>
I have my aspx code here:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="SearchCustomer.aspx.cs" Inherits="WebApplication1.eyeofheaven.SearchCustomer" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="StyleSheets/SearchCustomerStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<title>Search Customer</title>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="twelve columns">
<!-- Header-->
<div class="container">
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle active" href="#">Search<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Search Form(Customer)</li>
<li>Search Form(Vehicle)</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Search form customer-->
<div id="searchcustomer" class="page-header">
<h3><span class="glyphicon glyphicon-th-large"></span>Search Customer</h3>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" runat="server" id="search" size="20" class="form-control" placeholder="Customer ID">
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Country">
<option value="select" selected disabled>Search by Country</option>
<option value="A:C ESTUDIO">A:C ESTUDIO</option>
<option value="Aaron McEwen-194712">Aaron McEwen-194712</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Currency">
<option value="selected" selected disabled>Search by Currency</option>
<option value="AUD">AUD (Australian Dollar)</option>
<option value="EUR">EUR (Euro)</option>
<option value="GBP">GBP (United Kingdom Pounds)</option>
<option value="JPY">JPY (Japan Yen)</option>
<option value="NZD">NZD (New Zealand Dollar)</option>
<option value="USD">USD (United States Dollar)</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" runat="server" onserverclick="Button1_Click" id="searchinfo" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search Info</button>
<button type="button" runat="server" onserverclick="Button2_Click" id="Button2" class="btn btn-danger"><span class="glyphicon glyphicon-repeat"></span>Reset</button>
</div>
</div>
<!-- Information Table-->
<div id="gridview">
<asp:GridView runat="Server" id="data" CssClass="table table-striped table-bordered table-responsive">
</asp:GridView>
</div>
</form>
</body>
</html>
And my css style here:
#searchcustomer{
margin-top:51px;
text-align:center;
background-color:#3399FF;
}
#gridview {
margin: 20px;
}
#data {
display: block;
height:400px;
overflow-y: scroll;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#data table,
#data thead,
#data tbody,
#data th,
#data td,
#data tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#data thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#data tr { border: 1px solid #ccc; }
#data td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#data td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
}
The output is okay when viewed on website:
But when viewed on mobile the output is like this:
All of my "th" seems to display before my all my "td"
How do I revised my css to make an output not like this. I want to make my table when viewed on mobile (It will get the th and td display)
Example:
When viewed on mobile:
The output is:
(First it will display the th tag "IDCustomer" and next to it is the td which is "253433")
(Image below)
Note:(I just edited this image on paint to further explain my question.)
How Do I design a css style like this?
You have to use responsive solution for this :
solutions here