I have a row with 3 columns containing cards, the b-card-text (text in the cards) is not equal in length thus making the cards differ in height. Question is how do I make the cards match in height?
Tried adding h-100 d-inline-block classes to the cards but no luck.
<b-row>
<b-col class md="4">
<b-card>
<b-card-text>Lorem Ipsum is simply dummy text of </b-card-text>
</b-card>
</b-col>
<b-col class md="4">
<b-card class="h-75 d-inline-block">
<b-card-text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
</b-card-text>
</b-card>
</b-col>
<b-col class md="4">
<b-card>
<b-card-text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
</b-card-text>
</b-card>
</b-col>
</b-row>
I expect the cards to be the same in height.
On the <b-row> add the class class="align-self-stretch", or to make it applicable to only md and up breakpoints: class="align-self-md-stretch". And then use the utility class h-100 on each <b-card>
Example: https://jsfiddle.net/ofcxrquz/
See:
https://bootstrap-vue.js.org/docs/reference/utility-classes
https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
Related
I have a List that contains lottery numbers
List image
How can I separate number and text, and after that list them in the below list: for example:
List<String> n = ["ABC23", "21A23", "12A312","32141A"];
Thank you!
You can do it by using forEach like below:
List<String> n = ["23", "2123", "12312","32141"];
n.forEach((element) =>
print(element)
);
And to separate number and text you can use the following code:
const text = '''
Lorem Ipsum is simply dummy text of the 123.456 printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an 12:30 unknown printer took a galley of type and scrambled it to make a
23.4567
type specimen book. It has 445566 survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
''';
final intRegex = RegExp(r'\s+(\d+)\s+', multiLine: true);
final doubleRegex = RegExp(r'\s+(\d+\.\d+)\s+', multiLine: true);
final timeRegex = RegExp(r'\s+(\d{1,2}:\d{2})\s+', multiLine: true);
void main() {
print(intRegex.allMatches(text).map((m) => m.group(0)));
print(doubleRegex.allMatches(text).map((m) => m.group(0)));
print(timeRegex.allMatches(text).map((m) => m.group(0)));
}
Please refer to this link for more information.
To do something with each element:
List<String> n = ["23", "2123", "12312","32141"];
n.forEach((element) {
int number = int.parse(element);
...
}
);
To do create list of ints:
List<String> n = ["23", "2123", "12312","32141"];
final intList = n.map((element) => int.parse(element)).toList();
I have an array of notes (viewModel.list) that I would like to display in a List. All notes conform to Identifiable.
When I use ForEach, all notes appear just fine:
ForEach(viewModel.list){ note in
NoteView(namespace:namespace, note: note)
}
But if I change this to a List no objects appear:
List(viewModel.list){ note in
NoteView(namespace:namespace, note: note)
}
The same thing happens if I embed the ForEach in a List
List{
ForEach(viewModel.list){ note in
NoteView(namespace:namespace, note: note)
}
}
I want to use a List because I would like to add a swipeAction to every NoteView which can only be used in Lists. Is there any reason this behavior is happening?
UPDATE: I have uploaded a reproducible example below and believe it has something to do with embedding the List in a ScrollView. If I remove the ScrollView, this code works fine, but nothing shows up with it.
import SwiftUI
struct Note: Identifiable {
var id = UUID()
var content: String = ""
}
var notes = [
Note(content: "Lorem ipsum dolor sit amet, consectet adipiscing elit. Condimentum quisque id vitae convallis dignissim pharetra nisl est creatus"),
Note(content: "Mauris ac tempor libero, non eleifend lectus. Mauris eu hendrerit nunc. Donec at ante mauris. Duis ac elit purus. Mauris ullamcorper mi."),
Note(content: "Lorem ipsum dolor sit amet, consectet adipiscing elit. Condimentum quisque id vitae convallis dignissim pharetra nisl est creatus"),
Note(content: "Mauris ac tempor libero, non eleifend lectus. Mauris eu hendrerit nunc. Donec at ante mauris. Duis ac elit purus. Mauris ullamcorper mi.")
]
struct ContentView: View {
var body: some View {
ScrollView {
List(notes){ note in
NoteView(note: note)
.padding(.bottom)
}
}
}
}
struct NoteView: View {
var note: Note = notes[0]
var body: some View {
Text(note.content)
}
}
List is not showing because List infer it size from its parent View. So when you embed it inside something like Scrollview that have dynamic height, it can't infer it size correctly.
Also List behaves like a UIScrollView (an arbitrarily long scrollable view of views).
So no need to wrap List inside scrollview.
struct ContentView: View {
var body: some View {
// ScrollView {
List(notes){ note in
NoteView(note: note)
.padding(.bottom)
}
// }
}
}
Just remove List from ScrollView - it is scrollable itself.
struct ContentView: View {
var body: some View {
List(notes){ note in
NoteView(note: note)
.padding(.bottom)
}
}
}
*the reason of the issue is that List wants to take parent size to expand, but ScrollView does not have own size and expects from content a size that needs to be scrolled, result is obvious - cycling conflict - to do not crash/hang in cycling SwiftUI breaks layout - output is empty.
I am using bootstrap-vue. I try to convert existing header to the navbar. There shall be a big brand name and a smaller slogan under it. I tried to use H1 and b-nav-text with BR but both texts are always rendered side by side. How can I place the slogan below the brand title?
<b-navbar-brand href="/">
<img src="./assets/logo.png" :alt="$t('app.logo-alt')" class="d-inline-block align-top">
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-text class="text-white">{{ $t('app.name') }}</b-nav-text>
<br>
<b-nav-text class="text-white">{{ $t('app.slogan') }}</b-nav-text>
</b-navbar-nav>
The upper side of picture is b-nav output, the below is original header built with b-container.
d-inline-flex flex-column
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-text class="d-inline-flex flex-column">
<span>Lorem ipsum is placeholder text commonly used in</span>
<span>the graphic, print</span>
</span>
</b-nav-text>
</b-navbar-nav>
I tried to run Webview richtext display with below code given in the referance document but it gives empty page.
Did something wrong on the code or just does not support webview rich text?
Pages.Page1.webView1 = new SMF.UI.WebView({
top : "5%",
left : "5%",
width : "90%",
height : "90%",
URL : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
});
Pages.Page1.add(Pages.Page1.webView1);
You should assign your rich text as HTML to the URL to display a rich text paragraph in a Webview.You can add as below:
Pages.Page1.webView1 = new SMF.UI.WebView({
top : "5%",
left : "5%",
width : "90%",
height : "90%",
URL : "<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit.</strong><mark>Nummus in Croesi divitiis obscuratur,</mark> pars est tamen divitiarum. Utrum igitur tibi litteram videor an totas paginas commovere?</p>"
});
Pages.Page1.add(Pages.Page1.webView1);
I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview