I hope its a simple question - how can I define a button with icon and text in material 15
<button mat-button>
<mat-icon>keyboard_arrow_left</mat-icon>
Back To Home
</button>
But it is not aligned
Found a solution for this issue. The reason for this is that button im Material are now bigger. Assigning icon this class will fix the issue:
.small-icon-button {
width: 1.5rem !important;
height: 1.5rem !important;
padding: 0px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
& > *[role='img'] {
width: 1.5rem;
height: 1.5rem;
font-size: 1.5rem;
svg {
width: 1rem;
height: 1rem;
}
}
.mat-mdc-button-touch-target {
width: 1.5rem !important;
height: 1.5rem !important;
}
}
Related
As I read and understand, an absolute positioned element is ignored by the parent and removed from the DOM flow, but in my example (please see the code snippet) it's not behaving like that. In my opinion, the absolute positioned child element should be ignored by the parent div and thus the outer container shouldn't be expanded to contain the child. Why is that? And how should I solve that (keeping the containers scrollHeight unexpanded by the child)? Thanks in advance.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 300px;
background-color: red;
top: 35px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
The absolute positioned element is positioned relative to the nearest ancestor.
It means your absolute positioned element will position itself relative to the nearest parent element which has the property, position: relative
If it does not have a positioned ancestor, then it will use the document body.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 120px;
background-color: red;
top: 0px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
I'm fairly new to the site but find it awesome, great expertise going around. I have a small issue with a site not displaying 100% right on mobile phones. It is build responsive and I'm of the impression it was working fine initially, but something changed along the line. The site adjusts itself to mobile screens but it does not scale properly and you must reduce it manually to see it all in the screen.
I'm not a real developer but it should be very easy fix I think. Hope someone can help.
Below my code:
#media only screen and (max-width: 767px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top:2%; left: 35%;}
#main-menu{ margin-left:0;}
}
#media screen and (max-width: 370px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top: 150px; left: 35%; }
#main-menu{ margin-left:0;}
}
/***** TABLETS PORTRAIT & LANDSCAPE *****/
#media all
and (min-width : 768px)
and (max-width : 1024px) {
mesh-left{ left: -280px !important; }
mesh-right{ right: -360px !important; }
}
/***** PORTRAIT TABLETS *****/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
Add this inside your <head> </head> tag to enable css to correctly detect the screen width:
<meta name="viewport" content="width=device-width">
You should use Bootstrap for develope responsive, mobile web applications
I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!
I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo
Well, i have one centered div used as a footer simply by: <div id="bottom-footer">Powered by Coolname</div> and the style:
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
And that renders ok in PC browser:
But when you tried on an iphone, its looks like this:
Clearly not centered, what im doing wrong?
looks like there is a margin or a padding on the containing body element or the div itself. Add this to your style sheet to reset the browsers natural behaviour:
html {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
}
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
margin:0px;
padding:0px;
}
Remove width:100%
#bottom-footer {
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
How can i make the height of the row and the header fixed when the height of the cellTable is fixed e.g 200px?
In my case, the header and the row are automatically re-sized every time a content is added or removed.
I've defined my CSS like this:
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
height: 25px;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 10px;
font-family: ARIAL;
height: 25px;
}
.cellTableEvenRow {
background: #ffffff;
height: 25px;
}
.cellTableOddRow {
background: #f3f7fb;
height: 25px;
}
I've also tried the cellTable#setColumnWith().
Any idea ?
[1]: http://i.stack.imgur.com/Vd2Hp.png ![enter image description here][1]
Ok, may be my question wasn't well asked at the first place :( but I've resolve my problem.
What i intended to do is to have a fixed table( with surrounding) where i can place my items without having the change on the numbers of the elements effecting the display of the table itself. So, to have that behavior, i didn't set a fixed height on the cell table (since that doesn't work) but I've put the hole table in a vertical panel with defined boder-style and manage the display of the cellTable with its css.
VerticalPanel contentPanelVP = getContentPanel();
contentPanelVP.add(this.trainerConfigurationTable);
/**
* Gets the panel that represents the surroundings
*
* #return configured vertical panel
*/
private VerticalPanel getContentPanel() {
VerticalPanel tableContentVP = new VerticalPanel();
tableContentVP.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
tableContentVP.setStyleName(CSS_TRAINING_BOX_CONTENT);
tableContentVP.setWidth(CONTENT_PANEL_WIDTH);
tableContentVP.setHeight(CONTENT_PANEL_HEIGHT);
return tableContentVP;
}
CSS
.tableContentVP{
border-width: 1px;
border-style: solid;
border-color: grey;
padding: 0px;
background-color: white;
}
Table CSS
#def selectionBorderWidth 2px;
.cellTableWidget {
}
.cellTableFirstColumn {
height: 25px;
}
.cellTableLastColumn {
}
.cellTableFooter {
}
.cellTableHeader {
padding: 0px;
text-align: center;
font-size: 10px;
font-family: ARIAL;
font-weight: bold;
color: white;
text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
background-image: none;
background-color: black;
height: 25px;
vertical-align: middle;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 10px;
font-family: ARIAL;
text-align: center;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableEvenRow {
background: #ffffff;
height: 25px;
cursor: pointer;
cursor: hand;
}
.cellTableEvenRowCell {
border: selectionBorderWidth solid #ffffff;
}
.cellTableOddRow {
background: #f3f7fb;
height: 25px;
cursor: pointer;
cursor: hand;
}
.cellTableOddRowCell {
border: selectionBorderWidth solid #f3f7fb;
}
.cellTableHoveredRow {
background: #eee;
}
.cellTableHoveredRowCell {
border: selectionBorderWidth solid #eee;
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
border: selectionBorderWidth solid #ffc;
}
.cellTableSelectedRow {
background: #628cd5;
color: white;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
border: selectionBorderWidth solid #628cd5;
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
border: selectionBorderWidth solid #d7dde8;
}
.cellTableLoading {
margin: 30px;
}
Voila !
I hope, it will help someone out there.