I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.
I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2).
I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks.
Using a CSS Grid layout, is there any way to designate a cell where content should go when a hyperlink is clicked, other than the cell that contains the hyperlinks -- using bookmarks or anything else?
Thanks very much for any info.
Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:
a {
text-decoration: none;
color: #333;
}
.tabs {
position: relative;
clear: both;
}
.tabs .tab {
float: left;
margin-right: 10px;
}
.content {
position: absolute;
background-color: white;
width: 100%;
left: 0px;
}
.tabs .tab:nth-of-type(1) .content {
z-index: 1;
}
.tab:target a {
font-weight: bold;
}
.tab:target .content {
z-index: 1;
}
<div class="tabs">
<div class="tab" id="tab1">
Tab 1
<div class="content">Content of Tab1</div>
</div>
<div class="tab" id="tab2">
Tab 2
<div class="content">Content of Tab2</div>
</div>
<div class="tab" id="tab3">
Tab 3
<div class="content">Content of Tab3</div>
</div>
</div>
I'm using twitter bootstrap for my css and the following code has an issue with the alignment:
see jsfiddle here: http://jsfiddle.net/graphicsxp/99rhF/ (make sure you enlarge the html view)
<div class="view-header">
<span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right">
</div>
<div class="clearfix"></div>
</div>
as you can see the button with the label 'Rechercher' is too far right. What am I doing wrong ?
There is nothing wrong with your button, its the containing element.
Update the css with:
.view-header {
background-color: #F5F5F5;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 20px;
padding: 10px 20px;
}
Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem.
See:
http://jsfiddle.net/99rhF/2/
The parent element has a width of 100%, but padding isn't included in width calculations, so it ends up being 100% + 40px. You fix this by wrapping the contents in a container, and padding that instead.
http://jsfiddle.net/ndTuL/
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #bbbbbb;
}
.content-wrap {
padding: 10px 20px 10px 20px;
}
First of all, I know I'm late to the party :)
Second - #Jamie Hutber has a very good and valid answer. No arguments here at all - it should remain the accepted answer for sure.
Third - Here's what I ran in to, and how I fixed it:
HTML:
<!DOCTYPE html>
<html>
<head>
<?php echo $str->head; ?>
</head>
<body>
<footer>
© Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
</footer>
</body>
</html>
<footer> is also a Block Line Element, so width is not needed. Here's what I did instead:
CSS
body {
background-color: #f8f3ed;
max-width: 1200px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
footer {
display: flex;
flex-direction: row;
height: 1.5rem;
font-size: 1rem;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
max-width: 1200px;
padding: 5px;
}
Things to note is that the position: absolute; will mess up any text-direction and make it overflow, especially if you try and add a width: 100% to it. The right and bottom stick it on the bottom right corner no matter how much you scroll.
It's not exactly what the question was asking, but I thought it might be nice for people to see some alternate ways to have this issue, and resolve it.