i have html page
<table class='table table-responsive table-hover table-responsive sortable draggable' id='print' border='5'>
<thead>
<tr class='warning'>
<td>head1 <a class='delete'>delete</a></td>
<td>head2 <a class='delete'>delete</a></td>
<td>head3 <a class='delete'>delete</a></td>
</tr>
</thead>
<tbody>
<tr>
<td>body1 body1 body1dfsffffffffffffffffffffffff </td>
<td>body2</td>
<td>body3</td>
</tr>
<tr>
<td>body4</td>
<td>body5</td>
<td>body6</td>
</tr>
<tr>
<td>body7</td>
<td>body8</td>
<td>body9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
and when i need to print the page i just want to print the table
i used this css ..
#media print
{
body *
{
visibility: hidden;
}
#print, #print *
{
visibility: visible;
}
#print
{
position: absolute;
left: 0;
top: 0;
}
}
and when i print the screen the table come in the center not in the top 0px
how cound i let the table be absolute;
its not working
thank you
Related
I'm having trouble using potential unique identifiers to select a specific row from a table.
Given the following table
#events {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin: 10px 0 20px 0;
}
#events td,
#events th {
border: 1px solid #ddd;
padding: 8px;
}
#events tr:nth-child(even) {
background-color: #f2f2f2;
}
#events tr:hover {
background-color: #ddd;
}
#events th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
<div>
<table id="events" class="table table-striped">
<thead>
<tr>
<th data-qaid="checkbox"><input type="checkbox" /></th>
<th data-qaid="event">Event</th>
<th data-qaid="date">Date</th>
<th data-qaid="location">Location</th>
<th data-qaid="purchase-date">Ticket Purchased</th>
</tr>
</thead>
<tbody>
<tr>
<td data-qaid="checkbox"><input type="checkbox" /></td>
<td data-qaid="event">Movie</td>
<td data-qaid="date">06/06/2022</td>
<td data-qaid="location">Frankfort</td>
<td data-qaid="purchase-date">06/06/2022</td>
</tr>
<tr>
<td data-qaid="checkbox"><input type="checkbox" /></td>
<td data-qaid="event">Concert</td>
<td data-qaid="date">06/06/2022</td>
<td data-qaid="location">Frankfort</td>
<td data-qaid="purchase-date">06/06/2022</td>
</tr>
<tr>
<td data-qaid="checkbox"><input type="checkbox" /></td>
<td data-qaid="event">Park</td>
<td data-qaid="date">06/10/2022</td>
<td data-qaid="location">Memphis</td>
<td data-qaid="purchase-date">06/06/2022</td>
</tr>
<tr>
<td data-qaid="checkbox"><input type="checkbox" /></td>
<td data-qaid="event">Concert</td>
<td data-qaid="date">06/10/2022</td>
<td data-qaid="location">Memphis</td>
<td data-qaid="purchase-date">06/06/2022</td>
</tr>
<tr>
<td data-qaid="checkbox"><input type="checkbox" /></td>
<td data-qaid="event">Sport</td>
<td data-qaid="date">06/12/2022</td>
<td data-qaid="location">Atlanta</td>
<td data-qaid="purchase-date">06/06/2022</td>
</tr>
</tbody>
</table>
</div>
<div id="change-location">
<label>New Location</label>
<input type="text" />
<button>Update Selected</button>
</div>
Using a playwright Locator, I want to be able to select the row for the Concert on 06/10/2022 and then be able to click the checkbox on that row.
I've been able to do this using a single column locator and selecting the first row encountered (using .nth(#)).
const child_locator = page.locator('[data-qaid="Event"]', { hasText: "Concert" }).nth(0);
const row_locator = page.locator("#events tbody tr", { has: child_locator });
row_locator.locator('[data-qaid="checkbox"] input').setChecked();
But this won't work, since my desired row would not be the first encountered row result.
I'd like to have something more robust / dynamic. And I'm having a hard time figuring out how to do this. I've tried various things like combining locators, using the resultant array of Locators to restrict subsequent searches. I think it comes from my understanding of Playwright locators being as complete as it can be. And I am studying the docs, but haven't figured this out yet.
I think my only real solution may be to get the text of the entire row and just regex on that. But this may have issues with false positives if the text being searched for appears in another column on a row. Such as in the given example, if I wanted to choose the Concert with Date of "06/06/2022", my regex would still select the Concert with Date "06/10/2022" since the Ticket Purchased would also match "06/06/2022"
Well, since you don't have any explicit selectors you can bind to, the only option is to reduce:
You collect all of trs.
You pick trs that have tds of kind Concert
From these, you pick trs that have tds appearing on 06/10/2022
You click on collected element(s)
Here's what I came up with:
/**
* options {{page: Page, search_array: [{column_index: number, needle: string}], tr_selector: Locator}}
*/
static async getRowByValues(options) {
// get the table data
const table_data = await options.page.locator(table_selector).allInnerTexts();
let row_index = table_data.findIndex( (row_text) => {
const text_array = row_text.split("\t");
// loop through the search_array data and match to text_array
for (const col_data of options.search_array) {
// fail immediately if false, continue if true.
if (text_array[col_data.column_index] !== col_data.needle) {
return false;
}
}
return true;
});
if (row_index >= 0) {
return options.page.locator(tr_selector).nth(row_index);
} else {
return null;
}
}
And to use this, one could do:
const desired_row = await getRowByValues({
page: page,
search_array: [
{
column_index: 1,
needle: "Concert"
},
{
column_index: 2,
needle: "06/10/2022"
}
],
tr_selector: page.locator('#events tbody tr')
});
if (desired_row) {
await desired_row.locator('[data-qaid="checkbox"] input').setChecked(true);
await expect(desired_row.locator('[data-qaid="checkbox"] input')).toBeChecked();
}
My requirement is to download docx file and should be open on Microsoft word:
I am using following gems:
gem 'responders'
gem 'htmltoword
Controller code:
require 'htmltoword'
class Admin::VisibilitiesController < ApplicationController
respond_to :docx, :html, :css,:js
def preview
#project = Project.find_by(id: params[:id])
#feeder = Project.find_by(id: params[:id]).form2.last.feeder11s.first
respond_to do |format|
format.docx do
render :docx => "report1_docx",:template => 'admin/visibilities/preview.html.docx.erb', :page_height => 600, :page_width =>345
end
end
end
View file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style type="text/css">
div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak { page-break-inside: avoid; }
td{padding: 2px 5px;}
</style>
<div style="padding-top:20px;">
<table style="width:800px;margin:0px auto;border:1px solid grey; background: #fff;margin: 0 auto;margin-bottom:30px;padding:10px 20px; ">
<tbody>
<tr>
<td style="padding: 15px 0 50px;">
<table style="padding:0px;overflow:hidden;display:table;">
<tbody>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Report No......./...../......./20116-17.....
</td>
</tr>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Dated: ......
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:28px;font-weight:bold;text-align:center;padding-bottom:20px; font-style: italic;">THIRD PARTY VILLAGE INSPECTION REPORT</td>
</tr>
<tr>
<td style="font-size:28px;font-weight: bold;text-align:center;padding-bottom:25px; font-style: italic;">OF</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">RURAL ELECTRIFICATION WORKS UNDER DEEN DAYAL UPADHYAYA GRAM JYOTI YOJANA (erstwhile RGGVY 12TH PLAN)</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">IN</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">..............DISTRICT</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED TO</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">........................</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED BY </td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:30px;">........................</td>
</tr>
<tr>
<td style="font-style: italic; padding-bottom: 30px; padding-top: 100px;">
<table style="width: 100%; margin-top: 50px;">
<tr>
<td style="font-size:12px;padding-bottom:10px;font-weight:600">Report No (admin)/District(survey)/1st/2016-17/070</td>
<td style="font-size:12px;padding-bottom:10px;font-weight:600; text-align: right;">Dated: from survey (form1)</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 50px;">
<table style="width: 100%;">
<tr>
<td style="font-size:18px;font-weight:600">Location:</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Village : <%= #project.form1.try(:village_name) %></td>
<tr>
<td style="font-size:16px;font-weight:600">Census Code No : <%= #project.form1.try(:census_code_no) %>
</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Block : <%= #project.form1.try(:block_name) %></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
htmltoword gem currently provides just some basic styling support mostly on alignment and tables.
Here is opened GitHub issue https://github.com/karnov/htmltoword/issues/45 about that problem.
And here is the doc describing supported styles and classes.
Try to use some basic HTML tags instead of CSS-styles where it is possible, it seems the only way at the moment to get your word doc to be styled.
In a Click handler I am trying to set the innerHTML of a div(detail_popup) with a MvcHtmlString.
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
Note: _TaskDetail is a partial view.
If I look at Bobo in debug using the HTML visualizer it is perfect.
I then assign innerHTML as such: detail_popup.innerHTML = #Bobo;
This generates a script error ... SCRIPT1002: Syntax error
I am about to lose my gourd! Any help would be much appreciated.
Bob
This is the MvcHtmlString Bobo whose assignment gives me script errors:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:08:14 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
I have pulled my hair out
Following is an abbreviated version of my partial view:
#model PromanV3.Models.ProTask
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
#System.DateTime.Now
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.TaskName)</td>
<td>#Html.DisplayFor(model => model.TaskDesc)</td>
<td>#Html.DisplayFor(model => model.TaskOwnerName)</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.Duration)</td>
<td>#Html.DisplayFor(model => model.CompPercentage)%</td>
<td>#Html.DisplayFor(model => model.TaskOptions)</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.RevisionDT)</td>
<td>#Html.DisplayFor(model => model.ProjectId)</td>
<td>#Html.DisplayFor(model => model.TaskId)</td>
</tr>
</table>
</div>
</body>
</html>
The is my div
<!-- Begin section that generates the detail popup for the task -->
<div id="DetailBox"
style="display: none;
z-index: 1000;
border: 2px solid blue;
background: yellow;
fill: white;
color: black;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
font: 14px Nautilus Pompilius;
width: 150px;
height: 65px;
">
<script>
#{
ViewBag.vwbProject = 15;
if (ViewBag.vwbTask==null)
{ViewBag.vwbTask = 1;}
}
</script>
</div>
This is my click handler:
function setMouseClickmt(xpos, ypos, width, height, message)
{
function inner()
{
var MultTxtBoxID = this.node.getAttribute("id"); // 'this' refers to the clear_rect (clear rectangle) of the SVG MultTxtBox
var MultTxtBoxElement = document.getElementById(MultTxtBoxID); // grab the element
var task_ID = MultTxtBoxElement.getAttribute("id");
var detail_popup = document.getElementById('DetailBox');
var task_index = getTaskPos(task_ID, arr_of_Tasks);
detail_popup.setAttribute('data-task',task_index);
detail_popup.setAttribute('data-project',15);
var tt = detail_popup.getAttribute('data-task');
var pp = detail_popup.getAttribute('data-project');
var ldt = new Date();
var ldts = ldt.toLocaleString();
//detail_popup.innerHtml = ldts + '</br>' + tt ;
#{
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
};
detail_popup.innerHTML = #Bobo;
/* Make the 'DetailBox' div appear */
detail_popup.style.display = 'block';
detail_popup.style.top = (100) + 'px';// '400px';//works//mTop + 'px';
detail_popup.style.left = (1200) + 'px';// //works//mLeft + 'px';
detail_popup.style.width = 250;//width;
detail_popup.style.height = 500;//height;
}
return inner;
}
This is the script output that it chokes on:
detail_popup.innerHTML =
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:21:34 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
;
Please try this...
From the razor page, pass the value of Model (#Bobo) to your JS file
<script>
var tempValue = '#Bobo';
setMouseClickmt(tempValue , yourOtherValues....);
</script>
and assign the value passed in your click handler in your JS
detail_popup.innerHTML = tempValue ;
Add the single quotes around #Bobo when you use it in the script tag of the razor page.
Hope it helps
Does jQuery mobile has anything for highlight? For example, highlight a table row. Jquery ui has ui-state-highlight.
<table>
<tr class="ui-state-highlight">
It should works with different themes and swatches.
Thanks.
/*
I'm also searching for that question. The only way I just now can think at this is using jQuery to find the selector:
$("table tr.myTR").addClass('error');*/
----------
<style>
.error {
background-color: #fbec88;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
<div data-role="content">
<table data-role="table" data-mode="" id="myTable">
<tbody>
<tr class="myTR">
<td>Alfreds Futterkiste</td>
</tr>
<tr>
<td>Maria Anders</td>
</tr>
<tr>
<td>Obere Str. 57</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td>12209</td>
</tr>
<tr>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function () {
$("table tr.myTR").addClass('error');
})
</script>
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered