I have a table in which the tableheader contents are creating linefeed when its long...
<th>Accounting Date Time (hh:mm): </th>
What happens is that after the word Date, the rest of the title is on the second line. pls advise. Thanks in advance
Use CSS.
th {
white-space: nowrap;
}
Works in IE, Firefox, Chrome, Safari, and Opera.
Related
As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>
When typing in input fields safari is creating a dropdown based contacts. I can't figure out how to hide this dropdown. I am able to hide the contacts button.
I'm running Safari Version 11.0.1
Fiddle to reproduce:
https://jsfiddle.net/27n5jL40/1/
<input type="text" name="fname"><br>
Hiding the auto-fill-button
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
Well, I realize this answer probably comes a bit late, BUT I think I can help. I have found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".
In my application, it was competing with a custom autofill. I defeated my dropdown as follows:
I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to First Name. The character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!
Wish I'd found some clever css, but this was the best I could come up with.
Hi I have the following html,
<td class="ms-crm-ReadField-Normal ms-crm-FieldLabel-RightAlign" id="agf_accountaccessemailaddressverified_c" title="AA E-mail Address Verified?">
<span class="ms-crm-InlineEditLabel">
<span class="ms-crm-InlineEditLabelText" style="max-width:200px;text-align:Right;width:80%;">
AA E-mail Address Verified?
</span>
<div class="ms-crm-Inline-GradientMask" style="display: none;">
</div>
</span>
</td>
I would like to see whether the checkbox AA E-mail Address Verified? as enabled or not using selenium webdriver.
I tried the following method :
bool check = driverIE.FindElement(By.CssSelector("#agf_accountaccessemailaddressverified_c > span:nth-child(1) > span:nth-child(1)")).Enabled;
or
bool check = driverIE.FindElement(By.Id("agf_accountaccessemailaddressverified_c")).Enabled;
Still getting the error that unable to find element.
Any help much appreciated?
I don't know Selenium, but a pure DOM way to find out if a field is locked would be through its lock icon.
For your field agf_accountaccessemailaddressverified there is a lock icon span tag with the id agf_accountaccessemailaddressverified_lock.
When locked it has the style display: block;,
When unlocked, it has the style display: none;
If you can check that with Selenium you should be able to test it properly.
The corresponding input doesn't get disabled, it just stays hidden in the background.
I'm not familiar with usage of it, but if Selenium behaves similarly to Chrome's F12 console, this will return the bool you need:
frames[0].Xrm.Page.getControl("agf_accountaccessemailaddressverified").getDisabled();
What I mean is, if you open the record in CRM, hit F12 and paste that in the console, it would return true or false depending on if the field is disabled or not. If Selenium runs javascript as it seems, it should not be that different.
I have a big problem with arranging the text from "featured products" in prestashop. First of all, I want the title to be on two lines and centered. I've tried several methods, but with no success. Second, I want "short description" to have more characters and be centered as well.
I've posted below the link to the site and an image of how I would like it to look. Do you know what line should I change or what I need to do?
http://www.3bwine.com/CRISTY/prestashop/index.php
http://oi58.tinypic.com/1608m10.jpg
This is a simple CSS "problem". Css for described changes come from two files.
.../prestashop/themes/default/css/golbal.css
.../prestashop/modules/homefeatured/homefeatured.css - this is not very important but may or may not interfear with some of our changes
To align your title they way you showed on your image I reccomend to add these lines of code to your global.css file ( as you dont have any VERY unique classes on your p or a elements we will be targeting them from a bit further)
div#featured-products_block_center div.block_content ul li p.s_title_block a{
text-align:right;
width: 150px; // set as big/small as you want yoru heading title to display, you can play around with it. This should push the title on two lines, but if your title is chagining all the time in lenght then it might not be useful.
font-size: 22px; // should overwrite the current font-size, make as big/small as you need
}
To align description the way you need add this line to global.css file
div#featured-products_block_center div.block_content ul li div.product_desc a{
text-align:right;
margin-bottom: 20px; // you can play around with it , this pushes your price further away from the text
}
To change the lenght of your short description go to ../prestashop/modules/homefeatured/homefeatured.tpl and locate something similar to this
{$product.description_short|strip_tags|truncate:65:'...'}
And there change the truncate to whatever you need. ( changes the lenght of your " short description"). Number is in characters.
BR's
(Related to other post with minor refinements and perhaps slightly different use case then that one?).
This took hours to narrow down what specifically in my page's HTML/CSS combination was causing IE9 to crash with the
"Internet Explorer has stopped working" error (if I choose to debug, the specific error was "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." IE 8 did not crash. I narrowed it down to the following:
To reproduce, create an HTML page with this (seemingly) simple table:
<table>
<tr>
<td colspan="2">
TEST ROW
</td>
</tr>
<tr class="tr1" id="tr1">
<td class="blank">
test
</td>
<td>
test
</td>
</tr>
</table>
Add this CSS:
<style>
.tr1 td, th
{
border: 1px solid Black;
}
td.blank
{
border:0 !important;
}
table
{
border-collapse: collapse;
}
</style>
Add this button (or any other mechanism) to hide the second row:
<input type="button" onclick="document.getElementById('tr1').style.display='none';"
value="Hide Table Row" />
If you click the button, you will reliably reproduce the IE9 bug.
Anyway, I wanted to post this bug because I could not find a single posting that matched the error code "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." and hope this helps the next guy.
Does anyone else have any workarounds they want to contribute? Have you come accross this bug? Anyone in the IE 10/Windows preview group know if IE 10 has same issue?. If not, would you mind filing this as a bug?
Here are some workarounds - all of them work but might not be appropriate for your situation:
remove !important from blank 0 border (I could not use this solution because I truly needed no border - it was important - pun intended ;) )
OR make border 1px solid White instead of border 0 (this is solution I used and in a way makes sense that borders should not go from 1px to 0px and is probably the root of the bug in IE9 I'd guess?)
OR get rid of border-collapse: collapse; (I couldn't use this because I wanted them collapsed)
OR get rid of colspan (I couldn't because I needed it)
OR take up knitting instead of writing Software for constantly changing browsers (again, I couldn't because I don't like knitting;) )
Thanks #AdamE... your workarounds were a big help.
I am in the same position: I need to hide a row on a table with collapsed borders and the occasional colspan (....and I don't like knitting either :)
I used an equivalent of Xrumet's answer to temporarily apply your/his workaround:
$myTable.css("borderCollapse", "separate");
$myRow.hide();
$myTable.css("borderCollapse", "");
Does the job.