EXTREMELY GREEN CODER
I have some q-cards with 2 q-card-sections. One for text and the other for an image. I want the text section to remain a fixed size but the text length is not fixed and will overflow/wrap and increase the section height. I have tried to truncate the text and display the full text.value with a tooltip but could not find success with that.
I might mention that I'm using the grid system for this site, which is still a concept I am struggling with. I have tried setting the section as a defined row(3) but it didn't seem to have much effect.
Here is what I have done so far:
<div class="row">
<q-card v-for="stuffs" class="col-3">
<q-card-section class="text-center">
<div class="col">
<a>
<b class="fontsize-16 text-capitalize text-weight-bolder">Text I want to shrink</b>
</a>
</div>
</q-card-section>
</div>
Related
For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below).
When implementing the same input with a matSuffix for a trailing icon, the extra margin is no longer there.
Any idea how to get rid of it?
Below an example of the used code:
<mat-form-field fxFlex appearance="outline">
<mat-label>Quota</mat-label>
<mat-icon matPrefix>pin</mat-icon>
<input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>
You can try wrapping your code with a div.row and a div.col-2 as shown below.
<div class="row">
<div class="col-2">
enter your code here
</div>
</div>
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have a page I'm making where where on small screens (ie: phones) I want the image above the text, and on larger screens I want the image to the right of the text.
I'm using offset to pull the image right on larger screens. However, it's not aligning properly on larger screens (smaller screens are just as I would expect). The text on the left doesn't start until after the image on the right. I haven't used the offset feature of bootstrap before and I'm not quite sure what I'm doing wrong...
Here is a screenshot (unwanted gap marked in yellow)
And the code...
<div class="row">
<div class="col-md-4 col-xs-12 col-md-offset-8">
<img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">
</div>
<div class="col-md-8 col-xs-12">
<?php echo nl2br($p['desc_landing']); ?>
</div>
</div>
Any help appreciated!
Heyho,
what you are doing with col-md-offset-8 is pushing the image to the right with a margin, thus filling the whole line with this column.
The math: 4+8=12
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
Your Picture
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
Your text
</div>
You can solve this via push and pull. So on medium screens your text will show "first" on the left side with ratio 8/4. Then on smaller screens it will go to normal order where the picture is on the top and the text beneath. Hope that helps :)
Oh, for test reasons i put col-sm. Otherwise you cant see the result in the preview :)
Greetings
Okay, I started exploring Bootstrap and in that process, constructed the basic navbar that is at the top of the page. But when I follow the demo code that bootstrap has provided on their page and create the navbar, what happens is that the "Brand" text goes to the very left of the bar that is close to the edge of the page (on the desktop). I am attaching the image below that shows what I mean:
Here is the snippet of the relevant code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
So I would like to offset the "Brand" a little bit of however much I want to the right.
Also similarly you could see in the above image that the "Link" and "Dropdown" at the very right of the bar. How do I offset it to the left?
Or in other words I would like to have the text/logo in the bar begin and end with offsets instead of sticking to the extreme left and extreme right.
To my surprise, when I look at the sample Bootstrap pages, for example take a look at this page the text on the top navigation bar ("Project name") is offset from the right and the left and I don't see anything special they have done to do the offset. But when I use the same code, it shows up at the very edge.
Oh, wait, I see that they have used
<div class="container">
whereas I have used
<div class="container-fluid">
So it seems like using "container" gives the offset, whereas using "container-fluid" pushes it to the extremes of the bar?
But regardless, how do I create offset (by a certain amount on the left and right) as I wish?
#jorn - thanks for your response. Unable to add this to the comment section, hence editing the posting to add my question:
I added it to the CSS and it is working and now offsetting it by 50 px. That is good. Similarly I added the 50px offset to navbar-right and it is creating offset at the right too. But now the challenge is how do I EXACTLY vertically align this Brand to the first column in the body below for which I have used the following code:
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
Now given we are using 50 px; for the Brand offset, but using "div class="col-md-10 col-md-offset-1"> for the body column, how could I guarantee that there is absolute vertical alignment between the Brand and the first column of the body? Right now, it doesn't seem to align, as shown in the image below:
I don't want to be doing guesswork on how much value I should define in for the offset i.e. say 50 px; or 49 px; or 39 px; etc. - is there another absolute sure way to define the offset of the brand in such a manner that it automatically aligns? Thanks.
Edit 2:
Looking at the CSS code I figured this:
.col-md-offset-1 {
margin-left: 8.33333333%;
}
Then accordingly to my style.css I added:
.navbar-brand {
margin-left:8.33333333% !important;
}
But in spite of this, the Brand and the body's first column aren't aligning as shown in the image below:
Any idea why there is still mis-alignment? Thanks.
You can just use margin-left, here's a fiddle
.navbar-brand
{
margin-left:50px !important;
}
EDIT
I'm sorry it took a while, but I've reworked the fiddle. You can find the answer here.
.navbar-header{
width:200px;
margin-left:8.3333% !important;
}
.content{
margin-top:100px;
}
The margin left from the offset had to be on the navbar-header instead of the navbar-brand. I hope this helps you for your project.