I have the following html but this is making the button grow bigger in size. How to make the button not grow in height ?
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Solution with fxLayoutAlign directive
The simplest way is to use the fxLayoutAlign directive on your div element as shown below.
<div fxLayout="row" fxLayoutAlign="center center">
...
</div>
Solution with CSS
The problem in your HTML template is that the h5 element is the tallest element and that all other elements in the row are laid out with same height. One possible solution is to remove the top and bottom margins from the h5 element using CSS.
h5 {
margin-top: 0;
margin-bottom: 0;
}
In case you have other h5 elements on the same page that must not be altered, you need to define a specific CSS class for the h5 element that appears in the flex row (it could be named "h5-inline").
.h5-inline {
margin-top: 0;
margin-bottom: 0;
}
The HTML template would then look like this.
<div fxLayout="row">
<h5 class="h5-inline">User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Related
I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}
I got an Angular Flex-Layout row which contains some buttons and a mat-button-toggle-group. Unfortunately, the mat-button-toggle-group is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.
This is hot it looks currently:
Tried to meddle with the css classes of mat-button-toggle-group and others, but only got to so far as to reduce the button height while the content stayed the same.
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div class="control-buttons">
<button
mat-stroked-button
>
<i class="material-icons">skip_previous</i>
</button>
( more buttons )
</div>
</div>
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<mat-button-toggle-group multiple>
<mat-button-toggle
value="random"
>
<i class="material-icons">
shuffle
</i>
<span class="only-on-big-screen">
random
</span>
</mat-button-toggle>
( more buttons )
</mat-button-toggle-group>
</div>
</div>
</div>
Another workaround would be to do this:
.mat-button-toggle-group {
height: 32px;
align-items: center;
}
You can change the height by adding custom styles. You have to change the line-height of the class mat-button-toggle-label-content.
.mat-button-toggle-label-content {
line-height: 32px !important; <-- set you height here
}
What worked for me was reducing the line-height of the content and adjusting height of the buttons in a global style file.
.mat-button-toggle-button {
height: 2rem; // the modified height that I wanted.
}
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
}
Using Angular Material's flexbox I'm having trouble getting divs with margins and borders to line up.
I'm wanting to have a row with 3 boxes each taking up 1/3 of the horizontal space, followed by a row with 2 boxes - the first having 1/3 and the second having 2/3 of the space. This works fine if I don't have margins around the boxes but with margins it breaks.
How can I fix this?
HTML:
<body layout="column" ng-app="myApp" ng-cloak>
Borders of divs with margins don't line up
<div class="with-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
Borders of divs without margins line up fine
<div class="no-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
</body>
CSS:
body {
width : 100%;
background-color: #dedede;
padding: 2px;
}
div {
background-color : #c14543;
border: 1px solid black;
}
div.with-margins>div>div {
margin: 0 10px;
}
body>div,
body>div>div {
background: inherit;
border: none;
}
div.no-margins {
margin-top: 10px;
}
Here's a codepen demonstrating my issue.
http://codepen.io/craigsh/pen/ZWxGEQ
the problem is that margin takes extra spaces.
I think you probably just need to restructure your layout. does this work for you?
see http://codepen.io/anon/pen/NNYqLG
I replaced one div to span just to quickly avoid your div background css.
<div layout="row" layout-margin>
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row" layout-margin>
<div flex="33">Test</div>
<span flex="66" layout="row">
<div flex>Test33</div>
<span flex="none" style="width:15px"></span>
<div flex>Test33</div>
</span>
</div>
The idea behind is to make sure every row has the same structure, but each cell may have its own layout.
<div id="photo_attachment_container">
<%= f.file_field :photo %>
</div>
Currently this just looks like a button, how can I add some css and customise the look (e.g dimensions background etc) of this button? Thanks
The HTML file field has been, and remains, one of the most least customizable of the HTML form controls. The other problem is that it is rendered so differently between browsers and OSes. The best way to style these controls is to render the file control as a transparent element on top of another button or set of elements that is styled the way you want. The file control does not need to be visible to be activated with a user click, but it does need to be on the top most layer (sending it click or focus events doesn't work in my tests).
Here's some example HTML:
<div id="test">
<div class="wrapper">
<input type="file" />
</div>
<button>Select a file</button>
</div>
The CSS renders the wrapper div and button as absolutely positioned elements. The button is visible and styled while the wrapper which contains the file field is transparent. I've set the wrapper field to reduce transparency when you hover over it to illustrate its positioning relative to the styled button underneath.
#test {
position: relative;
}
#test .wrapper {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
z-index: 2;
}
#test .wrapper:hover {
opacity: 0.5;
}
#test button {
background-color: #ccc;
border: none;
color: #666;
padding: 3px 5px;
border-radius: 5px;
position: relative;
top: 0;
z-index: 1;
}
Example on JS fiddle.
http://jsfiddle.net/JgDuh/
EDIT:
To answer the question you asked in your comment, you would structure the above answer in your Rails view template like this:
<div id="photo_attachment_container">
<div class="wrapper">
<%= f.file_field :photo %>
</div>
</div>
This would render as (Note that I used user as the substitute for whatever model you passed in form_for):
<div id="photo_attachment_container">
<div class="wrapper">
<input type="file" id="user_photo" name="user[photo]" />
</div>
</div>
Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can't find a way (within the framework) to do this.
jQuery Mobile doesn't seem to have a css class to center elements (I searched through its css).
But you can write your own additional css.
Try creating your own:
.center-button{
margin: 0 auto;
}
example HTML:
<div data-role="button" class="center-button">button text</div>
and see what happens. You might need to set text-align to center in the wrapping tag, so this might work better:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
example HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
An overkill approach: in inline css in the div did the trick:
style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;"
Centers like a charm!
In the situation where you are NOT going to use this over and over (i.e. not needed in your style sheet), inline style statements usually work anywhere they would work inyour style sheet. E.g:
<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
The best option would be to put any element you want to be centered in a div like this:
<div class="center">
<img src="images/logo.png" />
</div>
and css or inline style:
.center {
text-align:center
}
I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.
http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b">Your Content Here</div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
None of these answers alone worked for me. I had to combine them. (Maybe it is because I'm using a "button" tag and not a link typed as a button?)
In the HTML:
<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>
In the CSS:
.center-wrapper {
text-align: center;
width: 300px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
}
You can make the button an anchor element, and put it in a paragraph with the attribute:
align='center'
Worked for me.
To have them centered correctly and only for the items inside the wrapper .center-wrapper use this. ( all options combined should work cross browser ) if not please post a reply here!
.center-wrapper .ui-btn-text {
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 0 auto;
}
This works
HTML
<section id="wrapper">
<div data-role="page">
</div>
</section>
Css
#wrapper {
margin:0 auto;
width:1239px;
height:1022px;
background:#ffffff;
position:relative;
}
Adjust as your requirement
.ui-btn{
margin:0.5em 10px;
}