I am trying to put tooltips on divs in an attempt to explain a user interface I'm working on.
On the right div the tooltip shows up just fine, and exactly how I want it to.
On the other end of my UI is a tooltip that ends up covering the whole div! I want it to display like the other div displays.
Here is the html for both
Working Version:
<div id="percentCompleteDiv"
class="container top-profile well text-center"
style="border-radius:3px;"
data-placement="right"
data-trigger="manual"
data-content="Displays the completion percentage
progress of the current upload"
data-original-title="Completion Percentage"
rel="popover">
<h4 style="color:#555;">Complete Pct:</h4>
<h3 id="uploadpercent">0%</h3>
</div>
Not-working version:
<div class="container text-center well"
data-placement="left"
data-trigger="manual"
data-content="Displays the current cost of this Job.
For more information on pricing see our pricing page"
data-original-title="Estimated Cost"
rel="popover">
How do I get it to display on the left properly?
Related
According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white py-5 px-5">
<h3 class="title mb-6">
Hi mom
</h3>
</div>
</div>
And here is what my site looks like on page load:
Does anyone know what code I need to add to get the regular modal behavior?
In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..
enter image description hereMy image wont show within the accordion line. Wondering how to fix this?
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">What do these icons
mean? <img src="/Untitled.png" alt="Untitled"></span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>They show you how many items have been offered for the pictured item. For example this item has had 7 items
offered. It is up to the items owner to decide which item to accept.</p>
</div>
</div>
The problem is most likely that your image is not in the position you mentioned in the src attribute.
I would recommend you to take a look at how the HTML file paths work. Iäll provide you with a link: https://www.w3schools.com/html/html_filepaths.asp
I develop a small angular material application. My objective is to obtain the following design for a card, that fit on every kind of media (desktop, mobile, tablette)
my "app.component.html" is the following
<mat-toolbar color="primary">
<div style="width:100%;" class="md-toolbar-tools" >
Liste des annonces
<span flex></span>
</div>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20%"></div>
<div fxFlex="60%">
<mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
<mat-card-content style="border:blue">
<img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
<div class="container" style="left: 45%; top:10px;">
<div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
<div>
<span>{{annonce.type}}</span>
<span style="float:right">{{annonce.prix}}</span>
</div>
<h4>{{annonce.surface}}</h4>
<h4>{{annonce.adresse}}</h4>
<div style="left:45%;">
<p>{{annonce.description}}</p>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="20%"></div>
</div>
<router-outlet></router-outlet>
I am terrible in placing elements and text in html pages, and therefore in a material card. I obtain the following output in the browser
Furthermore when I shrink my browser, I can't see the element and text on the rigth of the image placed correctly. I tried to reproduce the same on stackblitz (https://stackblitz.com/edit/angular-pexq15?file=package.json), but I got trouble with the angular material tags that are not taken in account.
So could you help me and tell me what is going wrong and comment the correct code so I improve myself in html/css. Thanks a lot
You should try leveraging the #angular/flex-layout Library for this. Additionally, you should consider moving your styles to your CSS File, since this will make your HTML File a lot cleaner and the styles more reusable. In your stackblitz you missed to include the styles for #angular/material in your SCSS File and you did not import the #angular/flex-layout module, which is why your stylings were messed up.
I tried to fix your example on Stackblitz. To get the desired spacings for your text, simply add paddings or margins to the left of those elements. Also beware of your image: You have to add a fitting height property, or it will become cropped/stretched.
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.