.abc{
white-space:pre-wrap;
}
<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>
Say I am displaying the message in Angular application in 2 line Like this:
LabelStudent:Ram is a good boy,
he is also kind.
I want the second line message i.e. He is also kind, should be displayed just below the first message and not beneath the label
This can easily be achieved with flexbox. I have reproduced a demo over here.
HTML:
<div class="container">
<label>student :</label>
<div class="information">
<span>He is a good boy</span>
<span> he is also kind'</span>
</div>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
}
.information {
display: flex;
flex-direction: column;
}
Related
I am trying to get the price under the annual plan.
.paymentsection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
final image
The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-container">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
</div>
.paymentsection {
display: flex;
flex-direction: row;
}
.plan-container{
flex-grow:1;
}
You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-wrapper">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
next you need to set flex direction to your new div element. this is your desire style:
.paymentsection {
display: flex;
}
.plan-wrapper{
display: flex;
flex-direction: column; /* default is row */
}
this changes should fix your issue.
To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column.
You could do something like this:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="pricing">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
Styles for pricing class:
.pricing{
display:flex;
flex-direction: column;
}
How could i make sure my <p class="title"></p> and
<p class="subtitle"></p> are displayed underneath of eachother because right now they are being displayed next to eachother
You can make use of flexbox, it'll definitely solve your problem.
Example
If you want to arrange two items underlying with each other:
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
If you want to arrange two items next to each other.
.container {
display: flex; /*by default it will align items in one row*/
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
i am so confused about flexbox. i tried to use it to align some inputs in a simple form but it won't work the way i was intending. first i did this:
.container {
width: 40vw;
display: flex;
justify-content: space-between;
}
and in html:
<div class="container">
<form id="location">
<input type="text" placeholder="Location">
<input type="submit" value="Get the weather!">
</form>
</div>
i was hoping the justify-content: space-between would add space between the two inputs so they floating out to the outer bounds of the container. not happening. after reading this: justify-content property isn't working i tried the following:
.container {
width: 40vw;
display: flex;
justify-content: center;
}
.item {
flex-grow: 1;
}
and in html
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
now it looks even worse, because the divs are on top of each other, instead of next to each other. adding flex-direction: row doesn't change a thing. any advice?
#location{
width: 40vw;
display: flex;
justify-content: space-between;
}
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
You have made .container div as your flex-container, which has only one flex-item #location form: You must make #location form your flex container so that it has two child elements to space-between your 400px width container And it will work fine
To brush up some fundamentals about flex-box visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If i understands correctly you need to add flexbox to parent. Your location is parent of the input elements.
.container {
width: 40vw;
#location {
display: flex;
justify-content: space-between;
}
}
This is happening because you are targeting the wrong element.
Flex works on a parent of the element that you want to move.
You want to move elements of the form, so you should apply flex to your form tag instead of the div.container.
Because the form tag is also just a div, not an element to be moved.
Here is solution to your problem : https://codepen.io/Juka99/pen/OJRmPVN
Try use flex box for #location.
The parent of 2 inputs, are form not container.
I need to build an app that has a table. I tried using html <table> tags to build a table. Even though it shows the table as i require when i run using npm run serve when i build an apk and run it on my android device the output is messed up.
Does anyone know how to build a table in weex.
And does anyone have any good documentations or tutorials regarding weex.
thanks
It looks like HTML but Weex does not render actual HTML on native. The <div>s you write are Weex components that get translated to the target platform.
So while running on a browser may render tables, until Weex has a default <table> component, it won't render on native as you expect.
You can create your own component and lay it out using flexbox.
As others have commented, Weex doesn't use HTML but rather has a XML syntax which looks alike. So you need to implement something akin to a using only <div>s. I had to do exacly that, so I might as well post it here.
<template>
<div class="table">
<div class="row heading">
<div class="cell headingColumn">Table</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 2</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</template>
<style scoped>
.table {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 60px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
/*width: 100px;*/
padding: 20px;
}
.heading {
background-color: grey;
font-weight: bold;
}
.headingColumn {
width: 120px;
}
</style>
Copy and paste it into dotwe.org and it will work and be rendered as expected in Android & the web.
As a side note, if you specify fixed widths (or min-widths) for the columns, styling will be much easier. That's why I've specified a .headingColumn class and there's a commented width:100px value inside .cell.
BTW, you might need to edit the and add a tag inside them with the text content you want.
How can I change the stack order of columns on mobile or tablet?
For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2 to be on top. I don't want to change the html structure to do it.
The example is below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
As of the current bulma version v0.3.1, there is no feature
for the changing the order of columns.
However, you can define custom styles to change the order for mobile, tablet or whatever resolution that you want.
You can define a custom class .reverse-columns for example and add it on parent with following styles:
#media(max-width: 767px) { /* <== You can change this break point as per your needs */
.reverse-columns {
flex-direction: column-reverse;
display: flex;
}
}
#import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");
#media(max-width: 767px) {
.custom-columns {
flex-direction: column-reverse;
display: flex;
}
}
<div class="columns custom-columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
#media(max-width: $desktop) {
.columns.is-reversed-touch {
flex-direction: column-reverse;
display: flex;
}
}
#media(max-width: $tablet) {
.columns.is-reversed-mobile {
flex-direction: column-reverse;
display: flex;
}
}
You can always add more rules for widescreen etc., but this is what you usually need.
flex-direction: row-reverse; is what I would use for .columns.is-mobile.is-reversed-mobile. So you can add that rule too.