I have become decent at responsive html (bootstrap) but now I have to remove elements based on resolution.
Look at browser vs. mobile:
Based on resolution, some buttons should lose the md-icon others lose their text, and a few buttons should be hidden completely.
How can I do that with angular and CSS?
hide icon but leave text,
hide text but leave icon,
hide button completely
Here is some of my code
<!--Save Invoice-->
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
SAVE
</button>
</td>
<!--Pay Invoice-->
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
PAY
</button>
</td>
<!--Print Invoice-->
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete">print</md-icon>
</button>
</td>
You can use Bootstrap's builtin classes like
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg
Example:
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material hidden-sm" aria-label="Save">save</md-icon>
<span class="hidden-xs">SAVE</span>
</button>
In the above code 'md-icon' will hide in small screens and 'SAVE' text will hide in extra-small screens.
You can refer those classes here:
http://getbootstrap.com/css/#responsive-utilities
For Hide Icon
Write in Css
#media screen and (max-width:768px)
{
.material-icons {display:none;}
}
For Hide Text
Html Code
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="btntext">SAVE</span>
</button>
</td>
css
#media screen and (max-width:768px)
{
.btntext {display:none;}
}
For Hide Button
In Css
#media screen and (max-width:768px)
{
.book-button {display:none;}
}
Save Invoice
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="hide-xs">SAVE</span>
</button>
</td>
Pay Invoice
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
<span class="hide-xs"> PAY</span>
</button>
</td>
Print Invoice
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete"><span class="hide-xs">print</span></md-icon>
</button>
</td>
Related
I'm trying to edit my code so, that if I hover over the delete button, the text gets a strikethrough-line, just like the css option text-decoration: line-through does.
EDIT:
I'm trying to have the Text "Creating this basic TODO Website" with a strikethrough, when hovering over the delete button
Is there a way to achieve this, without using JS, or do I need to use JS? (I'm currently using Bootstrap4)
The Code part is:
<tr>
<th scope="row">3</th>
<td class="text-justify">Creating this basic TODO Website</td>
<td>14/05/2020</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
Okay, I think I understand your problem. The problem is there is no "previous sibling" or "parent" selector in css. But I think a little bit tricky dom modification, and pure css, you can achive your goal.
table tr {
display:flex;
flex-direction: row-reverse;
}
table tr td:hover+td+td+td+td.your-text {
text-decoration: line-through;
}
<table border=1>
<tr>
<td>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>14/05/2020</td>
<td class="text-justify your-text">Creating this basic TODO Website</td>
<th scope="row">3</th>
</tr>
</table>
Explanation: The td-s are reversed, and css flexbox make re-reverse order. So it visible as normal order, but it is important: in the dom, it is reversed. After that you can use next element selector (+) more than once times. And the last trick: I split the buttons cell into two parts to access to delete button's cell exactly.
You can do it with CSS
i:hover {
text-decoration: line-through;
}
When you use bootstrap X, you can still use CSS:
button.not-available:hover, button.not-available i:hover {
text-decoration: line-through;
}
<button class="not-available">
<i>create</i>
</button>
<button>
<i>delete</i>
</button>
I have a very simple table and I want to vertically align the text of two elements, one of which is plain text and the other is a button (I've put them in span tags, because I've been trying different things), so now the code snippet looks like that:
<tr>
<td>element</td>
<td>
<span> test </span>
<span>
<button class="btn btn-danger pull-right">Delete</button>
</span>
</td>
</tr>
and
th, tr, td{
vertical-align: middle !important;
}
Unfortunately no matter what I try, as long as I use the pull-right class it looks like this:
The "test" element just won't align in the middle or align with the "Delete" text of the button. Any tips would be appreciated!
remove pull-right class and try this instead :
<tr>
<td>element</td>
<td class="d-flex align-items-center justify-content-between">
<span> test </span>
<span>
<button class="btn btn-danger">Delete</button>
</span>
</td>
</tr>
try this:
span.test{
line-height: 35px;
}
th, td {
border: 1px solid black;
}
<tr>
<td>element</td>
<td>
<span class="float-left test"> test </span>
<span class="float-right">
<button class="btn btn-danger pull-right">Delete</button>
</span>
</td>
</tr>
I am building a website that has the usual social media links in a footer on my page:
They are hosted in an HTML element coded as:
<div class="social">
<table>
<tr>
<td>Tweet </td>
<td>
<div
class="fb-like"
data-href="#Context.Request.Scheme://#Context.Request.Host.ToString()#Context.Request.PathBase#Context.Request.Path"
data-layout="button"
data-action="like"
data-show-faces="true">
</div>
</td>
<td>
<script type="IN/Share" data-counter="right">
</script>
</td>
<td><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" border="0" /></td>
</tr>
</table>
</div>
How can I force the alignment or padding of the buttons to be consistent?
Alternatively, if I want to use my own icons and hide these is there a standard approach to doing that?
Thanks
Mark
The way this is constructed is wrong! Please use table for data and not for styling. Change it to a div and you'll find that making it mobile responsive is easy.
Try to nest the divs so you can just move your main div and all the sub-divs within it moves along.
Try something like this:
.social { display: inline-block; }
<div id="social-icons">
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
</div>
And to make changes when viewing from a smaller screen - eg; mobile, then use media queries to align the content when a certain device size is reached.
Media Query CSS:
#media screen and (max-width: 480px) {
.social {
display: block;
width: 100%;
}
}
Of course, change the css styling to whichever you prefer.
I would use flex instead of a table layout. Set the parent element to display: flex; and align-items: top;. That forces the direct children of .social to align at the top.
.social {
display: flex;
align-items: top;
}
.social a {
padding: 5px 10px;
margin: 5px;
background-color: yellow;
}
<div class="social">
Facebook
Instagram
Pinterest
Twitter
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social">
<table>
<tr>
<td>
<button type="button" class="btn btn-info">
<i class="fa fa-twitter" aria-hidden="true"></i>
Tweet </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Share </button>
</td>
<td>
<button type="button" class="btn btn-danger">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Save </button>
</td>
</tr>
</table>
</div>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
So I have a few <td> elements within a <table> where I want all elements on the same line with no wrapping. I am using css white-space: nowrap; By default, all elements are horizontally aligned to the left and so I also use some float:right; to space some elements.
This works great in Chrome, but in Firefox it seems to add another line and its a weird bug. How can I keep everything on the same line in FIREFOX?
scenario 1
<td style="white-space: nowrap;">
<a data-id="10796" data-pr="MOV1">AGG55TTYY</a>
<span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
<span style="font-size:11px; color:#cc0000;">2</span>
</span>
</td>
scenario 2 and 3
<td style="white-space: nowrap;">
MOV3<span style="font-size:11px; color:#AAAAFF; font-weight:bold; float:right; vertical-align:middle;">#JJ655</span>
</td>
You can fix your issue by either adding float left to the anchor:
<table style="width:100%;">
<td style="white-space: nowrap;">
<a data-id="10796" data-pr="MOV1" style="float:left">AGG55TTYY</a>
<span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
<span style="font-size:11px; color:#cc0000;">2</span>
</span>
</td>
</table>
Or putting your anchor after your span
<table style="width:100%;">
<td style="white-space: nowrap;">
<span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
<span style="font-size:11px; color:#cc0000;">2</span>
</span>
<a data-id="10796" data-pr="MOV1">AGG55TTYY</a>
</td>
</table>
I am trying to get a make a div which contains a set of tools responsive.I have a side menu below this which I have made responsive. Could someone let me know where would this be wrong.
#tools {
width: 160px;
position: fixed;
display: inline-block;
margin: 0 auto;
line-height: 1.4em;
}
#media only screen and (max-width: 600px) {
#tools {
width: 70%;
}
}
<div id="tools" style="width: 100%">
<table>
<tr>
<td>
<input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu">
</td>
<td id=uploadedit>
<button id="upload" onclick="insertIntoDatabase()" class="pinColor"><i class="fa fa-upload fa-2"></i>
</button>
</td>
<td id=impledit>
<button id="implview" onclick="openImplView()" class="pinColor"><i class="fa fa-pencil fa-2"></i>
</button>
</td>
<td>
<button id="home" class="homeButton"><i class="fa fa-home fa-2"></i>
</button>
</td>
<td>
<button id="keep-menu-open" class="pinColor" ng-click="openAndFixMenu"><i class="pinColor"></i>
</button>
</td>
<td>
<button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i>
</button>
</td>
</tr>
</table>
</div>
You have a typo in your media query: it should be # instead of ##. Aside from that, you're declaring width: 100% inline which overwrites whatever you've written in a stylesheet, which is why you don't see the result of the query.
Probably best to take the style="100%" from the div, any inline style like this will over-ride whatever is in the stylesheet.
Also in the media query you have
##tools { width: 70%; }
change to
#tools { width: 70%; }