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/
Related
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>
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
Here We have one confusion.
Can I use bootstrap3 classes in bootstrap 4 version
Example: panel, pull-right, col-xs-4
in my excising project. I used these classes. can I go with same or replace with new classes(panel-card).
In Bootstrap 4-
(1) panels, wells, and thumbnails have been replaced by cards.
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
(2) pull-left and pull-right are replaced by float-left and float-right.
(3) .col-xs-4 is now .col-4
I am trying to figure out how to get an image/map or whatever, in this case a map, displayed to the right side of my form.
This image shows what I want it to look like. It will be a dynamically generated Google map however.
Here is my current code for the form itself via bootply.
Bootply Example
Thanks!
You need to add another wrapper row and column inside your container.
<div class="row">
<div class="col-md-8">
<!-- Your Form Here-->
</div>
<div class="col-md-4">
<!-- Your Image here-->
</div>
</div>
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.