Hi I'm trying to add a colored border to my 'dreams-anchor-wrap' div but can't seem to be able to use any CSS on it for some reason and I'm not sure why. Is it not possible to wrap a div around an anchor tag and then add CSS properties to it?
here's the link to my sandbox code:
https://codesandbox.io/s/unruffled-jones-0v0xj?file=/src/App.js
You just misspelled className on 'dreams-anchor-wrap' div.Correct your mistake and should work
You have to write your classes like "class" not className.
Then it will be run correctly.
* {
margin: 0;
border: 0;
padding: 0;
}
.dream-homes-container {
display: flex;
justify-content: center;
}
.dream-home-card {
margin: 0 auto;
padding: 15px;
width: 200px;
height: 100%;
}
.dream-homes-container :last-child {
padding-right: 0;
}
.dream-home-card img {
width: 100%;
height: 70%;
}
.property-info {
width: 100%;
color: black;
padding: 0 0 5px 10px;
}
.dream-home-card a {
text-decoration: none;
width: 100%;
}
.num-specs-margin {
margin-right: 10px;
}
.dream-anchor-wrap {
border:2px solid blue;
}
.dream-homes-wrap {
margin-bottom: 50px;
}
<div class="App">
<div class="dream-home-card">
<a href="#">
<div class="dream-anchor-wrap">
<img src="https://images.pexels.com/photos/2343466/pexels-photo-2343466.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<div class="property-info">
<h4>Pent Suite</h4>
<div class="property-specs">
<i class="fas fa-bed"></i>
<span class="num-beds num-specs-margin">4</span>
<i class="fas fa-shower "></i>
<span class="num-baths num-specs-margin">2</span>
<i class="fas fa-car"></i>
<span class="num-cars ">2</span>
</div>
</div>
</div>
</a>
</div>
</div>
Related
I'm building twitter clone and it's UI have a 3 column layout.
Working Implementation
When access it from desktop, it shows like this:
-------------------------------------------
| Navbar| Feed | Follow |
-------------------------------------------
When access it from tablet or mid size device, it shows like this:
-------------------------------------------
| Navbar| Feed |
-------------------------------------------
When access it from mobile or small size device, it shows like this(Navbar should be at bottom):
--------------------------------------------------
| Feed |
| Nav-item-1| Nav-item-2 | Nav-item-3| Nav-item-4|
--------------------------------------------------
I'm successful in making layout responsive for tablet and desktop but for mobile I'm having issues.
This is what I have tried:
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
}
Full Code:
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<div className="row">
<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
<div>
<div className="logo">
<a href="/home">
<img src="/twitter.png" alt="logo" />
</a>
</div>
<a href="/home">
<i className="fas fa-home"></i>
</a>
<a href="/search">
<i className="fas fa-search"></i>
</a>
<a href="/notifications">
<i className="fas fa-bell"></i>
</a>
<a href="/messages">
<i className="fas fa-envelope"></i>
</a>
<a href="/profile">
<i className="fas fa-user"></i>
</a>
<a href="/signout">
<i className="fas fa-sign-out-alt"></i>
</a>
</div>
</nav>
<div className="mainSectionContainers col-12 col-sm-8 col-lg-5 ml-2">
<div className="titleContainer">
<h1>Home</h1>
</div>
Feed
</div>
<div className="d-none d-lg-flex col-md-2 col-lg-4 mt-5">
{/* Follow suggestions */}
<aside className="followSuggestion">
<div className="followSuggestionHeader">
<h2>Who to follow</h2>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
CSS Code:
div .logo {
width: 50px;
height: 50px;
}
div .logo img {
width: 100%;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
nav a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 30px;
width: 55px;
height: 55px;
text-decoration: none;
color: #212529;
}
nav a:hover {
background-color: var(--buttonHoverBg);
color: var(--primary-blue);
border-radius: 50%;
}
.mainSectionContainers {
padding: 0;
margin: 0 -10px 0 10px;
border-left: 1px solid #e6ecf0;
border-right: 1px solid #e6ecf0;
}
.titleContainer {
height: 53px;
padding: 0 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #e6ecf0;
flex-shrink: 0;
}
.followSuggestion {
background-color: rgb(247, 249, 249);
border-radius: 16px;
padding: 15px;
margin: 0px 20px 20px 20px;
}
.followSuggestionHeader {
border-bottom: 1px solid #e6ecf0;
}
.followSuggestionHeader h2 {
font-size: 20px;
font-weight: 800;
}
.followUsernameContainer {
flex: 1;
display: flex;
padding: 12px 0;
border-bottom: 1px solid #e6ecf0;
}
.midFollowContainer {
padding: 0 15px;
}
.userImageContainer {
width: 50px;
height: 50px;
}
.userImageContainer img {
width: 100%;
border-radius: 50%;
background-color: white;
}
#submitPostButton {
background-color: #1fa2f1;
color: white;
border: none;
border-radius: 40px;
padding: 7px 15px;
}
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
.logo {
display: none;
}
}
Finally, I managed to make it fully responsive.
The issue is because of the wrong breakpoint(480px) I have set and extra div present outside nav-items which override parent class property.
Changes I have made in css:
#media (max-width: 576px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
flex-direction: row !important;
}
.bootomTab a {
flex-grow: 1;
}
.logo {
display: none;
}
.mobileHide{
display: none;
}
}
On desktop, it shows like this:
On tablet, it shows like this:
On mobile, it shows like this:
I want to make the same design below
But I have a problem with the floating div which is the camera icon.
It should be clickable. I put z-index so it will be on top of the image that will change. I want to make all div to be clickable.
Hope you guys can help me.
Thanks!
here's my code
<article class="RegistrationInfo__Section media">
<div class="RegistrationInfo__Section--image media-left">
<div class="field">
<span class="file-bg">
<span
class="icon is-large"
v-if="formObject.image"
>
<img v-if src="~#/assets/images/camera.png">
</span>
<img v-else src="~#/assets/images/camera.png">
</span>
<div class="file is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="image"
ref="input"
#change="validateAndProcessImage"
>
<span class="file-cta">
<span class="file-icon">
<img
v-if="formObject.image"
:src="`/api/files/${formObject.image}`"
>
<img v-else src="~#/assets/images/profile_off.png">
</span>
</span>
</label>
</div>
<p v-if="formErrors.imageFiles" class="help is-danger">{{ formErrors.imageFiles[0] }}</p>
</div>
</div>
</article>
Here's my SCSS file.
.RegistrationInfo {
#at-root #{&}__Section {
#at-root #{&}--image {
margin-right: 2rem;
.field {
position: relative;
.file-bg {
position: absolute;
z-index: 1;
right: -10px;
width: 50px;
height: 50px;
.icon i {
cursor: pointer;
margin: auto;
}
}
.file {
&.is-boxed {
.file-icon {
height: 128px;
width: 128px;
margin-right: 0;
}
.file-cta {
padding: 0;
border-radius: 50%;
justify-content: center;
img {
height: 128px;
width: 128px;
border-radius: 50%;
object-fit: cover;
object-position: top;
}
}
}
}
.help {
max-width: 128px;
}
}
}
The problem seems to be with the z-index you did set.
By default, all page elements have a z-index of 1 unless otherwise specified. Provided that .file-bg is your camera icon, changing the z-index to 2 would make your div clickable.
I have broken my head on the following css.
JSFiddle:
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?
Important: The div heights should not be changed to show the dropdown menu.
Remove overflow: auto on .first-row
$(document).on('click', '.dropdown', function() {
$(this).find('.dropdown-content').toggle();
});
#new_task_wrap {
position: relative;
display: flex;
}
#new_task_wrap > .box {
width: 100%;
border-style: solid;
border-color: #98afc8;
}
#new_task_wrap > .box > .first_row {
display: flex;
width: 100%;
/*overflow-y: auto;*/
}
#new_task_wrap > .box > .first_row > .description {
background-color: white;
display: inline-block;
font-weight: 400;
padding: 9px 9px 9px 9px;
cursor: text;
outline: 0;
flex-grow: 1;
overflow-y: auto;
}
#new_task_wrap > .box > .first_row > .calendar {
padding-top: 8px;
cursor: pointer;
}
.right-add-on {
position: relative;
}
.right-add-on >:not([contenteditable=true]) {
position: absolute;
right: 0;
color: #67829e;
cursor: pointer;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Updated jsFiddle
Just change overflow-y to visible
Refer this
The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.
#new_task_wrap > .box > .first_row {
display: flex;
overflow-y: visible; //Here is the change
width: 100%;
}
use position: absolute for .dropdown and position it accordingly
here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>