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>
Related
I have a table and in one of the columns exists two icons.
here is the pic
this is the code:
<td>
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
I need the icons to be in the same line and the same height as the other icons.
So I added display: flex.
And get this result:
And since I need the icons to be in the same line as the other I used:
padding-top: 23px and get this results
The problem is when I hover with the mouse on the line, in this place exists the white or blank space.
The white space starts exactly after I used display flex, and reduces a little after I used padding top.
I do not want this white blank, so when I hover all the line will be blue as before (first pic).
can someone assist
this is my new code:
<td style="display: flex;padding-top: 23px;">
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
this is the computed tab
If I do this in the developer tools it solved, how to do it via code?
Take a look, I have created an example and it works, so you should check CSS code.
If you cannot provide CSS code how can I help?
table {
border: 1px solid red;
width: 50%;
}
<table>
<tr>
<td style="display: flex;">
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-plus-circle-o text-success"></i>
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-help zmdi-hc-fw"
data-toggle="tooltip"
data-placement="top"
data-container="body"
data-html="true" title=""
data-original-title="ADD">
</i>
</td>
</tr>
</table>
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>
I am making use of the following css to toggle a chervon, but the problem is at start-up the wrong chevron is display. As soon as you start the toggle, it works. Not sure what I'm doing wrong?
CSS:
.arrow-toggle .fa-chevron-down,
.arrow-toggle.collapsed .fa-chevron-right {
display: inline-block;
}
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
HTML:
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
See the Pen Chevron Toggle Issue by Richard (#Programm3r) on CodePen.
Thanks in advance!
add class collapsed to the tr initially
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle collapsed">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
The .fa-chevron-down is hidden if the tr has the class .collapsed
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
http://codepen.io/anon/pen/LbWwdN
I have this sample:
link
CODE HTML:
<table class="table prospects-table">
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Email</th>
<th width="200">Phone</th>
<th width="200">Message</th>
<th width="200">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">test sdada</td>
<td width="200">asdsada#yahoo.com</td>
<td width="200">(321) 312-3123</td>
<td width="200"> sadasda</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
<tr>
<td width="200">Diaconescu Cristian</td>
<td width="200">asdsadsa#busteco.rh</td>
<td width="200">(312) 312-3123</td>
<td width="200">asdasadsdasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
</tbody>
</table>
I want each column of my table to have a width of 200px.
I added this code to each td but does not work ...
<td width="200">test sdada</td>
Probably something simple but I realize why this code does not work.
Can you tell me please what is the problem and how to solve it?
Thanks in advance!
Why don't you just add a style tag to your code?
In the head just insert this:
<style>
td,th {width:200px}
</style>
Add table-layout: fixed; to your table
table{
table-layout: fixed;
}
Updated codepen
use this
<td style="width: 200px;">test sdada</td>
learn proper css take a loot at element level css here
you can add css :
style="width:200px";
DEMO HERE
try this one
<td width="70%">JXXXXXX</td>
hope this one help you
Width attribute is deprecated one. So it is better to use css width property instead.
Usage Note: Do not use this attribute, as it has been deprecated and
the rules should be defined and styled using CSS. Use the CSS property
width instead. - MDN
td, th {
width: 200px;
}
width of td doesn't work at HTML5,
use CSS styles instead , for example in simplest way
<style type="text/css">
.tdw{
width:200px;
}
</style>
<td class="tdw">Diaconescu Cristian</td>
I have a treetable which columns have an icon and text like this (this is fine)*:
However, when I reduce the width of the screen, this happens:
And I would like to have something like this:
My html is like this:
<tr data-tt-id="2" data-tt-parent-id="1">
<td>
<i class="fa fa-lg fa-file-text-o"></i>
Title
</td>
</tr>
And my js is:
$("#requestForQuotationTable").treetable({
expandable: true,
indent: 15
});
And the code generated by treetable is this:
<tr data-tt-id="2" data-tt-parent-id="1">
<td>
<span class="indenter" style="padding-left: 15px;"></span>
<i class="fa fa-lg fa-file-text-o"></i>
Title
</td>
</tr>
I have tried setting pull-left in the icon as suggested in here, but then it ignores the span.indenter element, getting the icon to the left.
I have also tried this, with no good results either because of the span.indenter.
All what I have tried leads me to think that my problem is with the span.indenter, but I can't figure out a way to solve this.
Edit after Jayababu's response:
<td>
<span class="indenter" style="padding-left: 30px;float: left;"></span>
<span style="float:left">
<i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
</span>
<span style="float:left"><a href="javascript:void(0)" style="cursor: pointer;">
hgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
</span>
</td>
looks like this (it's still ignoring the indenter and the text is not looking good =():
*I have created these images from the example in http://ludo.cubicphuse.nl/jquery-treetable/#usage
In the page you have mentioned,the folder image is loading as a background image
for the span.
If you need a design like you have shown in the third screen shot.
Restructuring is the only one solution in your case.
Ideally you need to create 2 elements let it be 2 spans one to hold the image,another to hold the text.Align both the spans with float:left.
Please find the below code snipped,working fine as you need
As we cant display images in the code snippet,i have just colored the indenter and folder icon with red and green.
.folder{
float: left;
background: green;
width: 20px;
height: 20px;
display: inline;
}
.indenter> a{
background: red;
width: 19px;
}
.indenter{
padding-left: 30px;
float: left;
display: inline;
}
.content{
display: inline;
height: auto;
}
<table>
<tbody><tr class="branch ui-droppable expanded selected" data-tt-id="3-1" data-tt-parent-id="3" style="display: table-row;">
<td>
<span class="indenter" > </span>
<span class="folder" >
<i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
</span>
<span class="content" ><a href="javascript:void(0)" style="cursor: pointer;">
hgjkghjk ghjk ghjk ghjk hgjk hgjkghjkhgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
</span>
</td>
</tr>
</tbody></table>