I'm developing an Ionic app, and having trouble with my header component. Its elements are wrapping with small screen sizes, and I would like them not to.
Here's the goal:
Here's what's happening now:
I know I could set a fixed width to the header, but I would like not to. I also wouldn't like to use JavaScript to calculate the width.
Here's the HTML/Angular/Ionic code for the title component:
<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
<button ion-button round class="button-back">
<ion-icon name="arrow-back"></ion-icon>
</button>
<h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>
Here are my CSS styles:
.button-back {
margin: 17px 0 0 10px;
}
.floated-title {
float: right;
}
Any time you want to force elements to line-up in a row, and never wrap, give the parent container display: flex. This automatically applies flex-wrap: nowrap and flex-direction: row.
The above suggestion applies to plain CSS. Some frameworks may set different defaults.
For instance, in React, flex-direction defaults to column.
Alternatively, you can apply white-space: nowrap to the container, which suppresses all line breaks inside the container.
Related
I'm trying to generate fixed-width buttons with the name of a file wholly contained within each. The following works, but seems pretty crude. On the plus side, it is nicely responsive to window width.
(It's possible that Bootstrap 3 is causing the problems? )
{% for attachment in attachments %}
<div class="fixwidth"> {{attachment.date}}
<a href="{{ attachment.attachment_file.url }}">
<!-- File icon on a styled link button: -->
<button type="button" class="btn fixwidth">
<span class="glyphicon glyphicon-file"/>
<!-- the following seems to be the only way to keep an over-long filename without spaces inside the button area! -->
<div class="in-button">{{ attachment.filename }}</div>
</button>
</a>
</div>
{% endfor %}
and the css
div.fixwidth {
width: 200px;
display: inline-block;
}
div.in-button {
width: 60px;
display: inline-block;
overflow-wrap:break-word;
}
button.fixwidth {
width: 80px;
white-space: normal;
overflow-wrap: break-word ;
}
What I don't like is that three fixed widths seem necessary. 200px for the containing div, without which the buttons won't line up if the number of files exceeds the capacity of one line. 80px, to set a button size leaving enough space for the date. And 60px to prevent the filename overflowing outside the confines of the button, should it lack any spaces and needs breaking by overflow-wrap. Experimentally, this sums to need to be 20px less than the button width.
Anyone able to suggest a better way?
(It's not a Django question. Django just generates this html for a multiple of attachments )
I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap
The sample code:
<div>
<mat-list fxLayout="row" dense>
<mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
<button mat-button>
<mat-icon>cloud</mat-icon>
{{label}}
</button>
</mat-list-item>
</mat-list>
</div>
The result:
When I resize the browser window:
What I need: the buttons that don't "have room" to simply go on the next row.
How do I achieve this? I tried several combinations of CSS classes, properties, etc... nothing worked.
LATER EDIT: here's a complete reproducible example: https://angular-svt72k.stackblitz.io
mat-list-item is by default using the full width of its container and setting each item as display: block. To overrule this, you need to override the default Angular (Material) styling that comes with <mat-list>.
Setting .mat-list-test to display: flex and adding flex-flow: row wrap will make it go to the next line when there's not enough space available. Next to that, as said, the .mat-list-item styling is taking the full width. You can override it by setting display: initial and width: auto. Read more about flexbox at MDN.
CSS
.mat-list-test {
display: flex;
flex-flow: row wrap;
}
.mat-list-base .mat-list-item.mat-list-item-test {
display: initial;
width: auto;
}
See this example on StackBlitz to show the outcome.
I have a table, and in the tbody I have an inline edit popup that is absolute positioned.
I have a table footer that has display inline-block that contains buttons that are floated to the left and right. It looks like:
<div class="table-footer">
<div class="new-row-button">
<lightning-button variant="base" label="New Row" title="Add new row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
</div>
<template if:true={changesWereMade}>
<div class="save-cancel-wrapper">
<lightning-button variant="brand" label="Ok" title="Make changes" onclick={handleSave}></lightning-button>
<lightning-button label="Cancel" title="Discard changes" onclick={revertChanges} class="slds-m-left_xx-small"></lightning-button>
</div>
</template>
</div>
What happens is I end up with this:
Even though the drop down supposedly has a z-index of 9001. The inline editor is inside the tbody tag. I have tried to raise the z-index of the tbody element, the table element, the inline editor, no luck in getting it to go over those buttons. The only thing I got to work was make the table-footer relative positioned and assign a z-index of -1. But this makes my buttons unclickable as they are now 'below' the page.
Does anyone have any css advice on how to get these buttons underneath the inline editor? (The table element and table-footer div are at the same level in the element hierarchy)
You can use the display flex css property for your footer to replace the float. Something like this :
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
footer .button {
flex: 1;
}
footer .button:first-of-type {
align-self:start;
}
footer .button:last-of-type {
align-self:end;
}
<footer>
<button> Add me </button>
<button> Delete me </button>
</footer>
Hope to help you.
I have a Clarity datagrid with pagination and a filter. I have some text that I would like to left-align on the same line as the pagination information. What's the correct way to do this? I've tried setting float: left; and float:right; in the two spans and also using the built-in "row" class. For reference, my footer looks like
<clr-dg-footer>
<span style="width:100%;">Search by value</span>
<span *ngIf="procs.length>0">
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
of {{pagination.totalItems}}
</span>
<clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
This is transformed into something like:
<clr-dg-footer _ngcontent-c25="" class="datagrid-foot">
<div class="datagrid-foot-description">
1 - 10
of 103 users
</div>
<clr-dg-pagination _ngcontent-c25="" _nghost-c27="">
<ul _ngcontent-c27="" class="pagination">
...
</ul>
</clr-dg-pagination>
</clr-dg-footer>
To give a general explanation, the footer looks like this when rendered:
<clr-dg-footer>
<various-built-in-controls-from-clarity />
<div class="datagrid-foot-description">
<!-- Your content goes here -->
</div>
<clr-dg-pagination></clr-dg-pagination>
</clr-dg-footer>
The footer itself is a flexbox, so setting widths as percentage on your content will not do anything. Clarity doesn't have a great way for you to left-align your content right now, and you should definitely open a ticket for it on GitHub, but in the meantime you can add the style flex: 1 to .datagrid-foot-description in your CSS which will make it take the all the available space on the footer, and then add any styles you want to your own content to display it as you want. For instance, using more flex with the two spans from your example:
.datagrid-foot-description {
flex: 1;
display: flex;
}
.search-by-value {
flex: 1;
}
This will make the footer description "fill" the empty space in the footer, and the search by value "fill" the description.
The following left-aligns the content of the footer:
.datagrid-footer {
justify-content: left !important;
}