Beginner question about bootstrap, i just cant get a solution for this problem!
I want to have both the 'Send' and 'Problem in Sending Mail' text on the same line.
Code:
<div class="d-inline-flex">
<button class="btn" name="submit" onClick="sendContact();">Send</button>
<p class="">Problem in Sending Mail.</p>
</div>
Whatever i do, the 'Problem in Sending Mail' text is always at the top of the div space.
How can i fix this?
Try align-items: flex-end ?
<div class="d-inline-flex align-items-end">
https://getbootstrap.com/docs/4.0/utilities/flex/#align-items
Related
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
I have a button which reads fine in Mozilla but in Chrome it is not working.
<div *ngFor="let product of products; let pIndex=index">
<mat-card [ngClass]="{'disablesidebar':showOverlay}">
<img mat-card-image (click)="onClickAddOn(product)" src="{{IMAGE_PATH}}/products/{{product.imageURL}}" alt="seat selection">
<mat-card-content>
<p>
{{ product.productName }}
</p>
</mat-card-content>
<button id="addSeatButton" mat-mini-fab color role="presentation" aria-label="'Seat Selection'" (click)="onClickAddOn(product)"
tabindex="6" class="rbtn-floating">
<i class="material-icons">add</i>
</button>
</mat-card>
</div>
Button addSeatButton id should read but is not working,Can someone please suggest what am I missing here.
I suspect the biggest problem is your role="presentation" on the button. That tells the screen reader that the button is no longer a button. It removes the semantics and essentially becomes a <span>. Try removing the role.
As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
I want to test the function to add an image to the application. How can I do this. attach_file method is not work. I don't know why.
html:
<form id="edit_user_5577b0c4a851ac600c000002" class="form-horizontal user-settings" method="post" enctype="multipart/form-data" action="/tardis54" accept-charset="UTF-8">
<div id="upload-avatar" class="control-group">
::before
<label class="control-label" for="user_avatar">
Setting avatar
</label>
<div class="controls">
<div class="form-fileupload">
<div class="image-preview">
<img class="gravatar img-circle" width="60" height="60" src="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=60" data-retina-url="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=120" alt="tardis54"></img>
</div>
<span class="btn btn-fileinput btn-default">
<span>
Choose file ...
</span>
<input id="user_avatar" class="input-file" type="file" name="user[avatar]"></input>
</span>
</div>
</div>
</div>
<div class="form-actions pull-right">
<input class="btn btn-large btn-primary" type="submit" value="Update" name="commit"></input>
</div>
</form>
test code:
scenario "upload a custom avatar" do
attach_file("user[avatar]", Rails.root + "temp4.png")
end
error log:
Failure/Error: attach_file("user[avatar]", Rails.root + "temp4.png")
Capybara::Webkit::ClickFailed:
Failed to click element /html/body/div[#id='content']/div/div/div/div/div/div[2]/form[#id='edit_user_5580e19da851ac6a51000002']/div[#id='upload-avatar']/div/div/span/input[#id='user_avatar']
because of overlapping element /html/body/div[#id='content']/div/div/div/div/div at position 740, 627;
It looks like you're using CSS to overlay another element on top of the HTML input. Some people do this because it's difficult to style HTML file inputs directly. However, doing so breaks capybara-webkit, because it needs to click on the actual HTML input field and the styled element is positioned on top of it.
This is being discussed in a GitHub issue.
You can work around it in the test by using execute_script to hide the overlay element, and then attempting to upload the file.
I find a way to solve this problem.
script = "$('#user_avatar').css({opacity: 100, display: 'block', position: 'relative', left: ''});"
page.execute_script(script)
I could assume that input[type=file] is not visible, thus you need initially make it visible f.e. execute javascript $("input[type=file]").show() and than attach file
Here's my implementation of #tardis answer (which itself is an implementation of #joe-ferris' suggestion). I put it as an answer to be able to use code formatting.
# spec/support/file_uploads.rb
module FileUploads
# Enables file uploads by capybara-webkit on pages that
# style file their input fields
def attach_file_styled_input(element_id, file)
page.execute_script("$('##{element_id}')" +
".css({opacity: 100, display: 'block', position: 'relative', left: ''});")
attach_file element_id, file
end
end
Don't forget to include this support module in spec/rails_helper.rb:
config.include FileUploads
Then use it in your feature spec like this (not spectacular):
attach_file_styled_input 'my_input_id', 'my_file'
I have a link that I need to click with capybara:
<div class="x-header x-floats x-push one-line ng-scope">
<div class="left">
<h1>Users</h1>
</div>
<span class="hint--left" data-hint="Create User">
<a class="x-round-button icon-plus" ng-tap="url('new')"></a>
</span>
</div>
I need to click the a with a class of x-round-button but I can't seem to find the right way to do so. I want to avoid using xpath if possible. Thank you in advance for the help.
You can do it like
page.find('.x-round-button').click