Kindly look at this this here you can see here is mentioned (8 left) i want to replace (left with places left) means in simple i want to show 8 places left…
https://digitalrise.website/product/kayak-lisbon/?date=2022-11-07
Here is link below
you can try this-
<div class="text-align: left">
<span>8 Left</span>
</div>
Please try this code, if you still facing issue just lemme know, i will help you more.
Thanks
In your HTML code for that page, find the following code:
<small class="spaces-left">8 left</small>
It is contained inside this class: <div class="form-field form-field-wide">
Change the part of that HTML that says "8 left" and change it to what you wish the page to display.
For example: <small class="spaces-left">Places Left: 8</small>
I'm trying to implement a table with editable cells using an approach like this. The cell contains a label or span and also an input box, and I'm using a flag to decide which one to display via ng-show. But when the label is made visible, the cell expands vertically. It's subtle in that demo but you can see the second row moving down slightly.
How can I make it remain the same size, like the editable table rows in this example? I've looked at the styles in that example but I can't figure out how it's being done. The span for non-edit mode seems to have the dimensions as 'auto' but when the input form appears, it has explicit width/height - and they happen to be exactly the same.
PS. I'm open to the idea that the way I'm doing it isn't optimal, in which case any alternative suggestions would be great.
<div ng-controller="MyCtrl">
<table>
<tr>
<td>
<label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label>
<input ng-blur="editing=false" ng-show="editing" ng-model="mytext" />
</td>
</tr>
<tr>
<td>
<label>some more text</label>
</td>
</tr>
</table>
</div>
I found out why the cells don't expand in the xeditable example that I linked to in my question - it's because there's an explicit size set in the css:
div[ng-controller] table tr td {
height: 45px;
/*text-align: center;*/
vertical-align: middle;
}
I didn't find this at first because I was looking in the css file that comes with the package, and I couldn't find any rules in there that would explain it. But it's actually defined in another css file for the demo page itself (https://vitalets.github.io/angular-xeditable/docs/css/docs.css).
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
I have a problem with formatting a CSS table using the Gumby framework. The first row of the table "grabs" content above it.
I suspect I have some unclosed tag, but I sure cannot find it.
Here is what I think is the releveant css:
<div class="six columns" center-text>
<div id='Tips' >
<h4>Tips for Tops</h4>
OMITTING TWO PARAGRAPHS OF TEXT
<br><br>
</div>
<div class="twelve columns center-text"><br><h2>Top Ten Individual Winners at All Clubs This Year<br> See All Club Results</h2><br>
</div>
<div id="response">
<div class="CSS_Table_Example" style="width:100%">
<table style="margin: auto;">
<tr>
<td>
etc.
The first row of the table put a border around the sides of the containing the "Top Ten..."
You can see the issue on a draft page at:
http://billhogsett.com/Whist/ajax.php?scores/index
The right hand column contains a table 50% of the time so you may need to reload a few times to see the issue.
I hope this is enough information to allow someone to solve my dilemma.
Remove background from the div or set a width so it won't go out. And set border: none for the CSS_Table_Example class to get rid off the border around.
Hope this is answers your question.
btw. don't use <br> to put some space, use margin property instead.
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>