How I can hide "Taxes" from checkout page because I have already prices including tax.
I've tried to add this code in optimized-checkout.scss but it doesen't work.
.cart-taxes {
display: none;
}
The cart taxes is not a class on the checkout page, it's actually an attribute. Try replacing the above code with the following one and it should work:
div[data-test="cart-taxes"] {
display: none;
}
Related
I have built a web site for my local plastic model club which involves showing multiple images on a page. I like to show them 3 abreast. Up to now, I have done this using a nested series of table codes which gets very messy.
Is there a simpler way. Let us say that I have 12 images and I want to show them three across and 4 rows down. I can do this using html table, html table row, etc. but it gets very complicated with lots of if statements, etc.
As I have had problems maintaining the web site from day to day, I have taken down the seaside version but you can see an example of the type of display on the current home page at http://www.ipms-clacton.org.uk under "A selection of member's models"
David
If you want to make the table programmatically you could use the following code as a new message in your class. If you pass it the html and an orderedCollection it makes a new table 3 items wide and as many rows as it takes. The final row can be less than three elements. You will need to change it to display images rather than text but it's a place to start. The removeFirst: command removes a number of items from an ordered collection and returns those items as a new collection. That lets you break the collection apart into elements for your individual rows. Here is the message's definition:
make3Table: html using: anOrdCollection
html table: [
[ anOrdCollection size >= 3 ] whileTrue: [ html tableRow: [
(anOrdCollection removeFirst: 3) do: [ :item | html tableData: item ]
].
].
anOrdCollection isNotEmpty ifTrue: [
html tableRow: [
anOrdCollection do: [ :item | html tableData: item ]
]
].
]
The question isn't Seaside specific, but HTML/CSS related.
The solution for that is to use any element inside a container, and use CSS-grid layout for that container.
E.g.
.gallery-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
padding: 20px;
}
.image-container {
display: flex;
background-color: navy;
color: white;
align-items: center;
justify-content: center;
height: 150px;
}
#media (min-width: 600px) {
.gallery-container {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 960px) {
.gallery-container {
grid-template-columns: repeat(4, 1fr);
}
}
<html>
<body>
<div class="gallery-container">
<div class="image-container"></div>
<div class="image-container">2</div>
<div class="image-container">3</div>
<div class="image-container">4</div>
<div class="image-container">5</div>
<div class="image-container">6</div>
<div class="image-container">7</div>
<div class="image-container">8</div>
<div class="image-container">9</div>
<div class="image-container">10</div>
</div>
</html>
It will work for any number of elements, and it has two CSS width breakpoints to show 1, 2 or 4 elements per row.
Then the Seaside part is only about generating that container and the elements using the canvas tags.
If you don't want to use a table another couple simpler ways to do it with css + seaside is with CSS columns:
html div
style:'columns:3';
with:[ myCollection do:[:ea | html div:ea]]
There are several css styling rules for columns.
Or using CSS flexbox
html div
style:'display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-between';
with:[
myCollection do:[:ea | html div
style:'width:32%';
with: ea]
]
Those style: rules could/should be in your CSS file as a CSS class
I would like to customize typeahead / bloodhound's display of the results list by adding a clickable font awesome icon. The use case is to allow users to initiate editing of one of the result items, rather than selecting it.
Is this possible?
I have added this suggestion template:
suggestion: function(el){
return '<div><strong>' + el.value + '</strong>' +
'<span style=display:inline-block; float:right;">
<i class="fa fa-minus-circle"></i><span></div>'},
}
This displays the icon and makes it clickable, but the icon is displayed right next to the el.value.
The answer is to not use inline styles, instead add a new class definition:
.tt-suggestion span {
display: : inline-block;
float: right;
}
and the icon is displayed correctly, aligned at the end of the suggestion row.
I am trying do display a form in read only mode;
I am trying to hide/disable the whole form header if posible; if not individual elements: bread crumbs, buttons (edit, create, more, delete, duplicate, next, previous) from the Form.
as shown in red selections
I tried modifying the invisible attribute using xpath as shown in
hide buttons Create, Delete and Edit
<xpath expr='/form/group/button[#string="Edit"]' position="replace">
<button type="action" attrs="{'invisible': [('uid','!=',0)]}" />
</xpath>
but all I can manage is this:
How to hide the header section or it's individual elements?
What Is the best practice in OpenErp 7 to make a form in read only mode.
Thanks
Hide it in /openerp/addons/web/static/src/xml/base.xml at line number 510
To hide the more button go to /addons/web/static/src/css/base.css and find:
.openerp .oe_sidebar {
white-space: nowrap;
}
and replace it with:
.openerp .oe_sidebar {
display: none;
white-space: nowrap;
}
This will hide the element so that the browser does not render it, it however will still be visible in the source code.
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.
I try to have a input of text like the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though
If you use html5 you can use:
<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>
If you couple this with the css:
#divThatYouCanWriteStuffIn {
min-height: 4em; /* it should resize as required from this minimum height */
}
To get rid of the 'annoying little triangle' in textareas:
textarea {
resize: none;
}
JS Fiddle demo of both ideas.
I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS
The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:
textarea { resize:none; }
That will make the triangle disappear.
You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..
So you can target all textareas or ones with specific classes or ids on them
Example:
textarea {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:140%;
color:black;
margin:0 0 5px 5px;
padding:5px;
background-color:#999999;
border:1px solid black;
}
This example will target all textareas on the page.
Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.
Hope this helps.