I found a post regarding this topic (How to set a Textarea to 100% height in Bootstrap 3?)
It works great and all until I need to start modifying it. The entire page will exceed 100%. See below for the code that I was using.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Short Essay</h3>
</div>
<p>
Submit a short essay no longer than 1000 words about "How I could realize my career aspiration #Company Abc?"
</p>
<hr>
<form>
<div class="form-group">
<textarea class="form-control" rows="8"></textarea>
</div>
</form>
</div>
</div>
</div>
http://jsfiddle.net/p9G8K/1/
Notice the form actually exceeds the window frame? I have attached a image to better illustrate
Seems like the text area is the 100% of the entire page plus the header <div> and my <p>.
-- Edit -- a screen shot of the desire outcome
What I wish to do accomplish is the following
Please advice.
Thanks!
It depends on what sort of a look you are looking for. I think what you may be after would require the width/height being specified for <div class='form-group'> element.
Having specified this, you should be able to set the <textarea>'s width/height to 100% hence filling the space required.
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.
I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any help, tips, suggestions, etc. Would be greatly appreciated!.
You could use columns classes to achieve what you want
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns
You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.
I have a number of controls declared like this.
<div class="row">
<div class="col-sm-12">
<div>Caption</div>
<input type="text" class="form-control">
</div>
</div>
Trying to refactor my code, I introduced a component to encapsulate this particular behavior.
<div class="row">
<app-textbox [caption]="'Caption'"></app-textbox>
</div>
The markup for the component is just a copy of the original code.
<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
<div>{{data?.caption}}</div>
<input type="text" class="form-control">
</div>
The problem arising is with the class row seems not to propagate to the component. It spreads to the full width (as it's set to 12 but it's not the width of the component holding the class row - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:
div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input
while the "old-style" generates this:
div class="row"
-- div class="col-sm-12"
-- input
One way to handle it is to set the columns on the component in the main page like this.
<div class="row">
<app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>
There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom app-textbox gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.
I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.
Is it possible to make the injected tag app-textbox spread fully in its parent?
I had the same issue. Here is the way I solved it.
Original app.component.html:
<div class="container-fluid">
<div class="row">
<app-one></app-one>
<app-two></app-two>
</div>
</div>
Original one.component.html:
<div class="col-9">
<p>One</p>
</div>
Original two.component.html:
<div class="col-3">
<p>Two</p>
</div>
I moved 'col' divs from one and two components to the app component:
New app.component.html:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<app-one></app-one>
</div>
<div class="col-3">
<app-two></app-two>
</div>
</div>
</div>
New one.component.html:
<p>One</p>
New two.component.html:
<p>Two</p>
For css to be visible in all your components, add it directly to the index.html file, or to app.component.css.
For example on the index.html as the last head element include:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
That URL was taken from : https://getbootstrap.com/docs/3.3/getting-started/
(I'm assuming that your Angular2 project was generated with angular-cli and the files follow the standard names)
About the extra margin, try checking app.component.html. Maybe there's a container div around it. Also check index.html itself
I have a template that gets all of the information generated from an external program. I am attempting to make this template a bit more modern and less 1992.
The page used to work with a table. It didn't look very nice so I am attempting to remove the table and just have everything on the screen fluid.
For the containers of the text I have used the bootstrap well class. The problem is that if one well is a bit longer then the other, it looks very odd. I need both of the <div class="well"> to be the height if the tallest one.
I have tried to do this with a lot of different CSS. I really don't want to have to go back to a table.
The code is below.
<div class="col-md-12">
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
</div>
Any help is appreciated.
so what you want is that the div's height must equal to the div that has a lot of data...
try using jquery.
var maxHeight = Math.max.apply(null, $(".well").map(function ()
{
return $(this).outerHeight();
}).get());
$('.well').height(maxHeight);
check this out:
https://jsfiddle.net/x3ehq57g/2/
Please review the Fiddle Here...
I am trying to separate some elements here and I'm having a tough time. All my div tags appear correctly separated, but I'm not getting the separation.
For example, I've got a button, then a clear, then a paragraph.
But, the paragraph is actually showing up inside the button, after the clear.
<div id="container">
<div id="header">Transfer of Credit Estimator</div>
<div id="content">
<div id="classes">Enter total number of classes estimated for transfer, then click <strong>Estimate</strong>.
</div>
<input type="text" class="" placeholder="#">
<div id="btn">Estimate<div> <!-- Button -->
</div>
<div class="clear"></div>
<p>Hi</p>
<div id="footer">**The Estimator is based on classes that would transfer in as 4-credit courses that cost $1,608 each ($402/credit hour) here at University. The Estimator assumes that each class would be a 5-week class.</div> <!-- Footer -->
</div> <!-- Close Container -->
</div>
On top of that, the footer is taking on attributes from the '.btn' class, such as the font-family and font-weight.
Thoughts on what I'm doing wrong here?
The button div is not closed. It should be:
<div class="btn">Estimate</div>
The button div is not closed
<div id="btn">Estimate<div>
instead it should be
<div id="btn">Estimate</div>
Your browser tries to correct you missing closing tag and that creates the attributes to shift