I am trying to use md-card in a page in my application. I also have an md-autocomplete in my home page. I had to alter the angular-material.css in order to make the autocomplete display perfectly in my home page.
But in my product page where I use md-card, it does not appear properly.
This is the css that makes the product page appear incorrect :
body,
html {
height: 100%; ----> This makes the page incorrect.
position: relative
}
Removing the height makes the other pages incorrect but the product page correct. Hence I need the height attribute in my other pages to display them correctly.
The below is the md-card code:
<div class="container ">
<!-- <div style="margin-top: 5%" flex-sm flex-gt-sm="100" ng-repeat="review in reviews"> -->
<div style="margin-top: 5%" ng-repeat="review in reviews">
<md-card ng-repeat="review in reviews" md-theme="dark-grey" md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Too Good</span>
<span class="md-subhead">username</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media">
<img ng-src="{{review
.imgurl}}" alt="">
</div>
</md-card-title-media>
</md-card-title>
<md-card-content class="col-md-11">
<hm-read-more hm-text="{{text}}" hm-limit="100" hm-more-text="read more" hm-less-text="read less" hm-dots-class="dots" hm-link-class="links">
</hm-read-more>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button>Like</md-button>
<md-button>Dislike</md-button>
</md-card-actions>
</md-card>
</div>
</div>
My application url : Home page
The product page : Product page
Please help me fix this css issue.
Give background colour to html or remove the height: 100%; for body. Specifying min-height not necessary.
html {
background: #A6333D;
}
body, html {
height: auto;
min-height: 100vh !important;
}
This will do the trick :)
Related
I have the following div styled and ready:
everything is working according to plan EXCEPT the "like" button, which I have as a div with the current css (to ease in seeing the border, I have also added a green border for debugging):
.article-likes {
margin-right: 16px;
float: bottom;
bottom: 8px;
left: 5px;
border: 3px solid #73AD21;
}
and this is the html for the entire div.
<article class="media content-section">
<img class="rounded-circle article-img" src="/static/profile_pics/b1775e70284ad2de-1.png">
<!--- THE ELEMENT I AM TRYING TO MOVE IS DIRECTLY BELOW THIS LINE::::: --->
<div class="article-likes"><a class="btn btn-success btn-xs" href="">like</a></div>
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="/user/1">1</a>
<small class="text-muted">(me) July 18, 2020 - 04:16 AM</small>
<div style="float:right;" class="mr-2">
<a type="button" class="btn btn-secondary btn-xs" href="/post/3">view</a>
</div>
</div>
<h2><a class="article-title" href="/post/3">demo post</a></h2>
<p class="article-content">demo post sorry</p>
</div>
</article>
I am trying to get the like button positioned directly under (and slightly offset to the left) of the user image (profile picture). I have tried float:bottom; but this does not seem to stick the image to the bottom of the post. I have also tried adding margins but those end up messing the other elements in the article tag.
Here is an example of what I am trying to achieve (inside red rectangle is optimal placement):
If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>
and Voila! you have a column of contents, very simple.
Dude, I gotta say, your code is totally messed up. For God's sake, don't use such lengthy class names for such a simple code. And as I can see, you don't have basic knowledge about floating a div. Anyways, here is you answer. Just remove your css code and paste mine.
.article-likes {
width: 100px;
height: 50px;
border: 1px solid green;
}
I am working with a 3rd party support provider and am trying to work around some limitations around what can be customized. I would like to add an HTML element (a) below a label, but only have access to css and footer html. My current idea is to add a hidden anchor in the footer and then try to reposition it via the css. I guess this MIGHT be possible with flexboxes, but my css foo is not that strong. So I figured I would come here and see if there was any way around it.
Concretely, I have a multiline textbox where users will enter their support request, and I need to insert an href to what can be asked right above it. I already have a ::before in place for some basic helper text, but I know that you cannot insert markup using css...thus my current attempt.
Is this even possible without knowing the specific location of each item...only their respective identifiers?
Here is a jsfiddle that reproduces the page as minimized as I can get it.
Again, please note that I ONLY have the ability to add HTML to the bottom of the page (in the footer element), and a global css file (shown in the separate css). That means I cannot edit the html outside the footer - that would be too easy ;)
HTML
<html id="portal_html"><head>
</head>
<body>
<div id="container">
<portal>
<div data-id="ticketForm" id="layoutContainer">
<div>
<div>
<div><h2>Submit a ticket</h2></div>
<div id="field_description">
<label for="description"><!-- react-text: 1235 -->Description<!-- /react-text --></label>
<div>
<div>
<div data-id="description">
<div id="description"><iframe name="deskEditor_New"></iframe></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footerContainer"><div id="footerContainer"><div class="Footer__footerCopyrigt">
<div class="Footer__container2">
<span>Powered by </span>
<a rel="noopener noreferrer" href="supporturl" target="_blank" class="Footer__footerLink">Support Provider</a>
<span> | </span>
<a rel="noopener noreferrer" href="terms" target="_blank" class="Footer__footerLink">Terms of Service</a>
<span> | </span>
<a rel="noopener noreferrer" href="privacy" target="_blank" class="Footer__footerLink">Privacy Policy</a>
<a rel="noopener noreferrer" href="foo">target</a>
</div>
</div>
</div></footer></portal></div></body></html>
and current css:
.ticketDetail .ConversationForm__list+.ConversationForm__list { display:none; }
div[data-id="description"]::before {
content: "Some custom content";
font-size: smaller;
}
label[for="description"], a[href="foo"]{
order:-1;
}
body {
display:flex;
flex-direction:column;
}
UPDATE
I found this SO that sadly shows flexbox will not work because they are not in the same heirarchy :/
....so I believe the answer is that this is not possible :(
Can you use JS?
const textAreaWrapper = document.querySelector('.text')
const linky = document.querySelector('[href=linky]')
document.body.insertBefore(linky, textAreaWrapper)
.someclass {
display: block;
}
.rest {
display: block;
}
.text {
display: block;
}
<span class="someclass">
<label>foo</label>
</span>
<span class="text">
<textarea></textarea>
</span>
<label class="rest">more stuff</label>
<label class="rest">even more stuff</label>
Here is a link I want above the textarea
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.
I have the following CSS code:
<style>
div.specialspecial {
width: 100%;
height: 0;
padding-bottom: 56%;
position: relative;
margin-left: 160px;
}
iframe {
width: 90%;
height: 100%;
position: absolute;
display: block;
}
</style>
And this html code:
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.
Edit:
Apologies for not providing enough information. Hopefully adding this will help:
This is the body of my html:
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card-2">
Link
Link
</div>
</div>
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</body>
This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion
As I am trying to get a similar style for my webpage
I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:
<div class="specialspecial">
<div class="pageContent">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</div>
Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.
It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it.
<style>
.page-container > * {
display: inline-block;
}
.page-sidebar {
width: 160px;
}
<div class="page-container">
<nav class="page-sidebar"></nav>
<main class="page-content"></main>
<div>
See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
Here's my html
<div id="contentBox" style="margin:0px auto; width:100%">
<div align="left" id="column1" style="float:left; margin:0; width:37%;">
<ul class="tmo_list">
<strong>
Commercial Buildings<br><br>
Shopping Centers<br><br>
Dumpster Pads<br><br>
Decks & Patio<br><br>
Store Fronts<br><br>
Restaurants<br><br>
Drive Ways<br><br>
Awnings<br><br>
</strong>
</ul>
</div>
<div class="wrapper">
<img src="images/pressurewashing.jpg"/>
</div>
<div align="right" id="column3" style="float:right; margin:0; width:37%;">
<ul class="tmo_list">
<strong>
Office Buildings<br><br>
Business Signs<br><br>
Loading Docks<br><br>
Rust Removal<br><br>
Wood Fences<br><br>
Gas Stations<br><br>
Bus Stops<br><br>
Homes<br><br>
</strong>
</ul>
</div>
</div>
Here's my css
.wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
width: auto;
}
I've been reading a few tutorial's
mainly
http://www.fredparke.co.uk/blog/using-max-width-resize-images-dynamically
and
How can I resize an image dynamically with CSS as the browser width/height changes?
and
How to dynamically resize image in css?
with no luck, I'm tired of changing things... so frustrating, what I get is the image superimposed over column3, but never does the image resize...
It does resize, Here is the fiddle, http://jsfiddle.net/TCdsK/
What browser are you using? I tried in mozilla and chrome.
Also make sure you have a large sized image, If you have a small image, your css wont stretch, here is the fiddle with the small image
http://jsfiddle.net/TCdsK/1/
here is the 3 column layout you are looking for
http://jsfiddle.net/TCdsK/3/