I am using twitter bootstrap in my rails app. I am trying to get the table header to display in the same row as the table data. Something similar to this
<tr align="left"><th>Due Date:</th><td><%= #invoice.due_date %></td>
</tr>
How can I accomplish this in twitter bootstrap?
Bootstrap doesn't have anything to do with it.
For each <tr> in your table, just use <th> for the cells you want emphasised.
If you're saying you want the row dividers to become column dividers, that's a bit of custom CSS along the lines of...
.table-vertical tr
{
border: none !important;
}
.table-vertical th
{
border-right: 1px solid gray;
}
... and so on.
Related
I am automatizing some reports with jupyter and exporting it to html. I have some large tables, and I want to add a scrollbar to rigthside of table. A similar question is here: How to get a vertical scrollbar in HTML output from Jupyter notebooks. Here are a reproducible example:
import pandas as pd
import numpy as np
pd.set_option('display.max_columns', None)
pd.set_option('display.max_rows', None)
np.random.seed(2021)
df = pd.DataFrame({'type': ['a'] * 50 + ['b'] * 50,
'var_1': np.random.normal(size=100),
'var_2': np.random.normal(size=100)})
I think it could be done using .css styling, but I'm having dificulties to apply it. Pandas have some useful methods for styling tables (https://pandas.pydata.org/pandas-docs/stable/user_guide/style.html). Then, I tryed the following:
vscrollbar = {
'selector': 'div.output_html',
'props': ' height: 500px; overflow-y: scroll;'
}
df.style.set_table_styles([vscrollbar])
After that, I compile the notebook from CLI with
jupyter-nbconvert example.ipybn --to-html
The output don't show the right scrollbar. But if I inspect the html code, the style that I passed throw Pandas is there
...
<style type="text/css">
#T_e24f1_ table {
height: 500px;
overflow-y: scroll;
}
</style>
<table id="T_e24f1_">
<thead>
<tr>
<th class="blank level0"> </th>
<th class="col_heading level0 col0">type</th>
<th class="col_heading level0 col1">var_1</th>
<th class="col_heading level0 col2">var_2</th>
</tr>
</thead>
<tbody>
...
I don't know if I'm passing the right selector, or if jupyter is overwriting this style.
How can I get a right scrollbar for long tables in html output from jupyter nbconvert?
There is a list of things you should know.
selector is a method that could help you to select one or several elements in html. So, maybe, you need to learn about how to use it. For your example. It should be '', cause, if you ever checked what the code output in ipynb, you will see like this below.
#T_f2ffe_ div.output_html{
height: 500px;
overflow-y: scroll;
}
The first part #T_f2ffe_ is generated randomly by pandas and the second part div.output_html is what you write. And these selectors will work together, and that will cause you to not specify any elements
A table in html, its height is calculated in two aspects, the td height and the number of td. If you want the css height to work, you'd better add display:inline-block first.
So here is the final answer that will work by little change.
vscrollbar = {
'selector': '',
'props': ' height: 500px; overflow-y: scroll;display: inline-block;'
}
df.style.set_table_styles([vscrollbar])
And the html looks like.
An option to implement a vertical scrollbar is using the following code:
display(HTML("<div style='height: 200px'>" + df.style.render() + "</div>"))
You can change the layout and position of the scrollbar to whatever you want. The output looks like this:
I set up a VFP that pulls in a checkable list of records from a list view. It renders properly and shows the records. But for some reason when I download the page and open it in Adobe or the web it’s not showing the data in the table.
APEX CODE:
global virtual with sharing class LoadsBatchMill_V2 {
global List<FR__Load__c> loadList {get;set;}
global String renderAs { get; set; }
global ApexPages.StandardSetController standardController;
global Set<Id> loadIds = new Set<Id>();
global LoadsBatchMill_V2(ApexPages.StandardSetController standardController){
this.standardController = standardController;
loadList = new List<FR__Load__c>();
for (FR__Load__c load : (List<FR__Load__c>)standardController.getSelected()){
loadIds.add(load.Id);
}
loadList = [SELECT Name, Pickup_By__c, Quantity__c, FR__Commodity__c, E_BOL_Link__c FROM FR__Load__c WHERE ID IN: loadIds];}
}
VISUALFORCE PAGE CODE:
<apex:page standardController="FR__Load__c" extensions="LoadsBatchMill_V2" recordSetVar="Loads" sidebar="false" applyBodyTag="false" renderAs="PDF">
<head>
<style>
body {
font-family: 'Arial Unicode MS';
}
blackline {
border: 1px solid #000;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th{
<!--border: 1px solid #8f8f8f;-->
border: 1px solid #c7cdd4;
padding: 5px;
}
</style>
</head>
<apex:pageBlock >
<div style="body; font-size: .85em">
<apex:image url="{!$Resource.FR}" width="120"/> <br /><br /><br />
<apex:pageBlock rendered="true">
<apex:pageBlockTable width="100%" align="center" style="border: none; vertical-align: bottom;" value="{!loadList}" var="L">
<apex:column value="{!L.Name}"/>
<apex:column value="{!L.Pickup_By__c}"/>
<apex:column value="{!L.Quantity__c}"/>
<apex:column value="{!L.FR__Commodity__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Comment out the <apex:image url="{!$Resource.FR}". Images in static resources generally don't display nice in PDF, you'd need a Document record with "externally available image" ticked. But it shouldn't cause the whole thing to fail, just render as broken icon.
<apex:pageBlockTable> renders poorly in PDFs because it comes with bunch of JavaScript that doesn't run. See https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_component_behavior.htm Printing nice PDFs is bit of an art, see if you can use <apex:repeat> and manually craft the <table><tr><td>.... See if you can steal some ideas from my answer to https://salesforce.stackexchange.com/q/194167/799
For debugging (and faster rendering) you can remove renderAs="PDF" from your page and add it when you're relatively happy with the output.
I'm new to Materialize and Angular. I have the exact same question as the question in this thread Change the default color of materialize.css input fields. I have attached screenshot
However, the solutions do not answer the question. I implemented this code in styles.css:
input:focus {
border-bottom: 1px solid #005DAB !important;
box-shadow: 0 1px 0 0 #005DAB;
}
label:active {
color: #005DAB;
}
Here's what I'm seeing:
What I'm seeing is the bottom border changes to blue (which is what I wanted). However, the label changes to blue temporarily (I'm assuming while it's active) and then it goes back to teal.
How do I make the selected label remain blue (#005DAB).
Hey the problem here is that the default CSS rules of materialize outweigh the custom rule you have defined.
You can read more about this here :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
In short the most specific rule overwrites the other so in order to make your change appear you need to make your rule more specific.
There's multiple ways of going about this like using the id in the selector or adding !important to your rule.
However these methods are not recommended, you can rewrite the original CSS rule or add a custom class to add weight to your selector
<div class="input-field col s12 label-color-alternate">
<input id="password" type="password" class="validate">
<label for="password" class="">Password</label>
</div>
For example I added a class "label-color-alternate" to the outer div, if we add this class to our selector it'll give us the necessary specificity.
div.row > div.input-field.label-color-alternate > input+label.active {
color: #005DAB;
}
You can of course experiment with the best way to write your selector and to which elements you want to add custom classes.
I hope this helps !
set this in your external css:
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 2px solid var(--yourcolor);
box-shadow: 0 0 0 0 var(--yourcolor);
}
I want to print out the pandas DataFrame as html table and send it as email. For Gmail, the styling in header will be eliminated, so the only way I can take is inline styling. The method I am using now is just replacing the html code. For example,
styled_html = html_contents.replace('<table ', '<table style="border: 1px solid; text-align:center"')
styled_html = styled_html.replace('<th ', '<th style="background-color:navy; color:white; border:none; padding:5px"')
styled_html = styled_html.replace('<td', '<td style="border:none; padding:5px;"')
I wonder if there is a better way for styling the table?
By the way, I have tried df.style.set_table_styles(), but it requires further change on the system so I tried not to use.
I am using the "Survey Link" template to create a project on Mechanical Turk.
I am running an A/B test. I would like to direct 50% of workers to one link, and 50% to another link.
How do I do this?
From the "Design Layout" page, click on "Source". This will let you edit the html/javascript/css for the survey.
You'll find a <table> element with a <tbody> element. Change the <tbody> element to this:
<tbody>
<tr class="survey-one">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-1">http://link-to-survey-1</a></td>
</tr>
<tr class="survey-two">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-2">http://link-to-survey-2</a></td>
</tr>
</tbody>
This simply adds another row to the table for the link for your second survey. Note the link-to-survey-1 and link-to-survey-2 that you'll need to replace with your own links.
A bit lower in the file, you'll see the <style> element. Add this to it:
.survey-hidden {
display: none;
}
And a bit lower, you'll see a <script> element. At the bottom of it, right before the });, add the following javascript:
var surveyToHide = (Math.random() >= 0.5) ? '.survey-one' : '.survey-two';
$(surveyToHide).addClass('survey-hidden');
This randomly picks one of your suveys, and makes it hidden, so that the worker sees only one.