I am trying to make a fancy button.
JSfiddle
<div class="button" data-button='closed'>
<div class="button-default">
<span class="button-text">Click</span>
</div>
<div class="button-overflow">
<span class="button-overflow-text">Confirm!</span>
</div>
</div>
The idea is that by default it displays 'Click' and when clicked it switches to 'Confirm'.
The problem is that I don't know how to make 'Click' and 'Confirm!' be always centered. I want it so no matter what text I put there - it still will be centered.
Just add
text-align: center;
to .button.
forked fiddle -> http://jsfiddle.net/Wd5vP/
You can simplify the CSS slightly, as such:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
}
body {
font-family:Arial;
}
.button-text {
position:absolute;
left:40px;
}
.button-overflow {
width:100%;
position:relative;
background:green;
width: 100px;
height: 28px;
right: -100px;
}
.button-default, .button-overflow {
text-align: center;
}
just add text-align:center to .button-overflow
.button-overflow {
width:100%;
position:relative;
display:table-cell;
background:green;
width: 100px;
height: 28px;
right: -100px;
text-align:center;
}
Add text-align: center; to your css class .button
It would look like this now:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
text-align: center;
line-height: 28px;
}
You also need to update your css class .button-overflow-text to display: inline and remove text-align: left and vertical-align:middle:
.button-overflow-text{
display: inline;
}
This modified CSS worked for me:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
text-align:center;
}
.button-default{text-align:Center;}
body {
font-family:Arial;
}
.button-text {
position:absolute;
left:40px;
}
.button-overflow {
width:100%;
position:relative;
display:table-cell;
background:green;
width: 100px;
text-align:center;
height: 28px;
right: -100px;
}
.button-overflow-text{
text-align:Center;
}
Related
I'm trying to have a popup for each news article in my database, so that the user can edit it. I can make it work for a single news article, but when I try to use .next() to find the next popup after the link it doesn't work. Seems like I'm misunderstanding something here?
php to make the links & popups:
foreach ($news as $n) {
//clickable link
echo '<a class="trigger_popup">'.$n['fldSubject'].'<span class="glyphicon glyphicon-edit edit-file clickable"> </span></a>';
//hidden div
echo '<div class="hover_bkgr"><span class="helper"></span><div><div class="popupCloseButton">×</div>'.$n['fldBody'].'</div></div>'
}
JQuery
$(window).load(function () {
$('.trigger_popup').click(function(){
$(this).next('.hover_bkgr').show();
});
$('.hover_bkgr').click(function(){
$(this).next('.hover_bkgr').hide();
});
$('.popupCloseButton').click(function(){
$(this).next('.hover_bkgr').hide();
});
});
.hover_bkgr{
background:rgba(0,0,0,.4);
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10;
}
.hover_bkgr .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 800px;
min-height: 100px;
vertical-align: middle;
width: 80%;
position: relative;
border-radius: 8px;
padding: 15px 5%;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
.trigger_popup {
cursor: pointer;
font-weight: bold;
color:#fff;
}
.trigger_popup:hover{
color:#ccc;
}
This question already has an answer here:
Row-wrap center align in flexbox
(1 answer)
Closed 4 years ago.
So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other.
I have no idea why it's behaving th way it is.
I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.
.wrapper {
margin-top: 15%;
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
float:left;
display: inline;
margin-left: 30%;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#two {
background-color: orange;
float:left;
margin-right:30px;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
#two {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
Use flexbox and you can easily do this without the need of media query:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
display: flex;
justify-content: center; /*center the element*/
flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}
.wrapper div {
min-height: 300px;
padding: 10px;
background-color: orange;
height: 400px;
width: 250px;
border: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
You can also use inline-block instead of float:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
overflow: hidden;
text-align:center;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
#two {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div><div id="two">two</div>
</div>
I am trying to create a progress arrow-bar which looks like similar to the image above. I started with a bar of columns (four col-sm-4) and do not know where to go from there.
I made (inspired by this post) a div with the shape you want:
.container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.v-div {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 25px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}
<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
Have a few of them overlap and you should be good to go!
A solution with :before and :after
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:80px;
display: inline-block;
background-color:green;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:80px;
vertical-align: middle;
}
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:40px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
}
.arrow:after {
border-left-color: green;
}
<div class="arrow">
<div class="inner-arrow">Next step</div>
</div>
For someone else stumbling onto this post and looking for something slighly different.
This is another solution that looks good
Using: transform, border and box-shadow - along with a little creative positioning and size adjustments
.locbar {
border-radius:5px;
border:1px solid #ccc;
background-color:#fff;
height:35px;
padding-left:10px;
}
.item {
float:left;
display:inline-block;
line-height:35px;
padding-left:5px;
font-family:Arial;
}
.arrow {
float:left;
position:relative;
transform:rotate(-45deg) skew(-15deg, -15deg);
display:inline-block;
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.15);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
width:19px;
height:19px;
top:8px;
left:-8px;
}
<div class='locbar'>
<div class='item'>
Products
</div>
<div class='arrow'></div>
<div class='item'>
Electronics
</div>
<div class='arrow'></div>
<div class='item'>
LED Televisions
</div>
</div>
You can achieve this by using css pseudo elements :before and after.
Check the below snippet:
ul{
padding:0;
list-style-type: none;
border:1px solid #ccc;
}
ul:before,ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
ul li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
}
ul li.active {
background: forestgreen;
color: #fff;
}
ul li a {
padding: 0 12px;
height: 40px;
line-height: 40px;
position: relative;
display: block;
}
ul li.active a:before,ul li.active a:after{
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent transparent white;
border-width: 20px;
left: 0px;
}
ul li.active a:after{
content: "";
right: -40px;
left: auto;
border-color: transparent transparent transparent forestgreen;
}
ul li.active a {
padding-left: 30px;
}
<ul>
<li><a>job post</a></li>
<li class="active"><a>invite</a></li>
<li><a>review</a></li>
<li><a>hire</a></li>
</ul>
I want to add some column filters in order to allow to filter a data in some html report,
but i don't have a friendly access to the html generator,
so my easy way is to do it by to add some hack inside the external css of this report.
Any ideas guys?
The HTML report generator:
https://www.npmjs.com/package/protractor-html-screenshot-reporter
The HTML report (actual view):
CSS:
body{
font-family:Arial
}
h1 {
padding-top: 15px;
padding-bottom: 5px;
text-shadow: 3px 3px #D0D0D0;
text-align: center;
font-size: 40px;
}
h2 {
background-color: #C0C0C0;
}
h1:after {
content: " - vCita Production \a";
white-space: pre;
}
div {
padding-bottom: 50px;
font-size: 18px;
}
ul,li{
margin-left:0;
padding-left:0;
width:100%;
font-weight:bold;
padding-top: 5px;
font-size: 18px;
}
table{
width:95%;text-align:left;
border-spacing:0;
border-collapse: separate;
margin-bottom:5px;
}
body > ul {
margin: 0 30px;
}
li{
font-weight:bold;
list-style:none;
width: 1900px;
width:100% !important;
}
ul table li{
font-weight: normal;
}
th {
padding: 10px;
border: 1px solid #FFFFFF;
}
td {
padding: 10px;
border: 1px solid #C0C0C0;
}
td:hover {
background: #F0F0F0;
}
a:hover {
color: gray;
}
td.desc-col{
width:500px;
}
th.desc-col{
width: 500px;
}
td.status-col{
width:75px;
}
th.status-col{
width: 75px;
}
td.browser-col{
width:160px;
}
th.browser-col{
width: 160px;
}
td.os-col{
width:100px;
}
th.os-col{
width: 100px;
}
th.img-col{
width: 50px;
}
td.img-col{
width: 80px;
}
th.msg-col{
width: 200px;
}
td.msg-col{
width: 200px;
word-break: break-all;
display: inline-block !important;
}
table.header{
background-color: gray;
color: #fff;
margin-left:30px;
}
.traceinfo{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right:0;
background: rgba(0,0,0,0.8);
z-index: 99999;opacity:0;
-webkit-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.traceinfo.visible{
opacity:1;
pointer-events: auto;
}
.traceinfo > div{
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
background: #fff;
overflow: auto;
max-height: 75%;
font-size: 14px;
}
.traceinfo .close{
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
}
.traceinfo .close:hover{
background: #00d9ff;
}
img.alt{
src: url(http://idantesting.comuv.com/public_html/reports/);
}
unfortunately you cant do this with css, you'll need a javascript solution.
Whilst it's possible to write it from scratch it a bigger job then you might imagine, but there are several plugins you can use, such as:
list.js - has functionalty to sort tables as well as lists
watable - requires jquery but provides lots of functionality
If you really want to write something from scratch you could look at this SO question on a jquery sorter for rows
As you are using a node package to generate the report, there isnts (to my knowledge) a way to add custom javascriot the same way you can add custom css. One option would be to use grunt to run the report, then use a template/find/replace to insert the javascript code <script src="[some url"> into the html that's been rendered
I'm using an HTML/CSS template to create a web app. For some reason the elements are not sliding back on the template when I resize the window which I need them to do. For example, if I float a button on the right it would position itself to the leftmost portion of the full screen. If I then contract the window horizontally the button does not move back but is simply 'hidden by the window'. I've been looking at the template CSS code for days now and googling everywhere but I still don't know what's causing this.
Here is the CSS code for the template:
body, html {
padding:0;
margin:0;
font-family: BBAlpha Sans;
font-size: 15pt;
overflow:visible;
}
body {
background-image: url('../images/stripes.png');
overflow:hidden;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
.label
{
display:inline;
float:left;
line-height:40px;
margin-left: 5px;
}
.row
{
height: 40px;
width:100%;
vertical-align: middle;
}
.tab
{
position:absolute;
top:70px;
padding: 10px;
}
.main-panel
{
position:relative;
}
.panel-top-left {
margin-right: 4px;
height: 4px;
background-image: url('../images/panel.png');
}
.panel-top-right {
margin-top: -4px;
margin-left: 4px;
background-position: 100% 0;
height: 4px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-left {
margin-right: 9px;
background-position: 0 -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-right {
margin-top: -9px;
margin-left: 9px;
background-position: 100% -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-inside {
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: White;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.panel-nogap {
margin-top: -3;
margin-bottom: -3;
}
.panel-nogap input
{
display:inline;
float:left;
font-family: BBAlpha Sans;
font-size: 16pt;
border: none;
padding-top: 0px;
width: 10px;
margin-top: 7px;
}
.buttonPanel
{
margin-top: 5px;
margin-left: 8px;
margin-bottom: 0px;
text-align:center;
position:relative;
}
a.tabButton {
background: transparent url('../images/tabs/tabRight.png') no-repeat scroll top right;
color: White;
display: block;
float: left;
height: 64px;
margin-right: 5px;
padding-right: 10px;
text-decoration: none;
width: 28%;
}
a.tabButton div {
background: url('../images/tabs/tab.png') no-repeat top left;
display: block;
height: 64px;
padding: 0px 0px 0px 10px;
line-height: 0px;
}
a.tabButton p
{
font-size: 10pt;
margin-top: 0px;
padding: 0px;
}
a.tabButton img
{
position:relative;
height:35px;
width:35px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
}
.tabSeparator
{
position: absolute;
top:69px;
background-color:#014EBE;
height:5px;
width: 100%;
z-index: -1;
}
and what the template looks like:
If anyone knows what is causing this or at least what I should look for, any help at all would be appreciated. Thanks in advance!
How about changing the position properties... fixed would be your best bet: positioning it fixed # 5em from the browser sides or something:
http://www.w3schools.com/cssref/pr_class_position.asp
play around on w3schools, it's a great site :)