I have a div inside of a Bootstrap modal dialog, using the AngularJS directives for Bootstrap.
The visibility of the div is hidden by default. This will change later on in response to a user action (e.g., clicking a button or form field). The problem I'm having is, even though the div is hidden, its contents are still occupying space in the modal body.
In other words, the height of the modal body includes the contents of the hidden div, even though it's hidden. I don't want this to happen.
Here's a contrived example of the modal template, including the div that I have set to hidden in the CSS:
<script type="text/ng-template" id="modal.tmpl.html">
<div class="modal-header">
<h3>Modal</h3>
</div>
<div class="modal-body">
<div>I'm a modal.</div>
<div class="hidden-div">
Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test
<br/> Test <br/> Test <br/> Test <br/>
</div>
</div>
<div class="modal-footer">
Modal footer here
</div>
</script>
It's probably easier to demonstrate what I mean with a fiddle. If you check out this fiddle, and click "Open Me", you should see what I mean.
The div with all of the "test" text is hidden, but the height of the modal body is still based off of it. How can I fix this?
Thank you for any help!
The hidden-div makes use of visibility: hidden. Although it hides the contents, but doesn't makes up for the space.
Read more about this.
To solve it, one should make use of display as below:
.hidden-div {
display: none;
}
Instead of using visibility use the display property.
https://www.w3schools.com/cssref/pr_class_display.asp
.hidden-div {
display: none;
}
Related
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 am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life
I'm using Bootstrap 3.3.4. I have a panel with a heading and footer, and a glyphicon to indicate the open/closed state of the panel.
If I use the id of the panel body as the selector for collapse then Bootstrap correctly applies the .collapsed class to the heading and the glyphicon changes. However, I want to also collapse the footer so I changed to using a class selector for collapse. The good news is the footer now also collapses; the bad news is that .collapsed is no longer applied to the heading and thus the glyphicon doesn't change.
CSS
.collapsible {
cursor: pointer;
}
.panel-heading.collapsible:after {
font-family:"Glyphicons Halflings";
content:"\e114";
float: right;
color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
content:"\e080";
}
HTML
<div class="panel">
<div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
<div id="theBody2" class="panel-body shrinkme collapse in">
nim pariatur cliche reprehenderit, enim eiusmod high life
</div>
<div id="theFooter2" class="panel-footer shrinkme collapse in">
<button class="btn btn-default">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
jsFiddle demonstrating both selectors
Am I doing something that's keeping .collapsed from being applied? How can I collapse the body and footer when the heading is clicked?
bootstrap only adds the class to there is #id or href and not class.
according to the docs you are suppose to target the collapse using two options
data-toggle="collapse" href="#collapseExample"
or
data-toggle="collapse" data-target="theBody2"
this way you do not have to add a cursor:pointer manually as well
Actually, the there is an workaround, the data-target works with class selector but really doesn't change the parent class.
On the parent element you can handle onClick event, like:
onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"
Here's the answer:
Make the footer panel a child of the body panel.
Use class panel-collapse on the body panel instead of panel
The first item is the key; the second one is for proper styling. I stumbled upon the solution by reading this issue.
Here is the revised jsFiddle with the updated HTML.
Updated HTML
<div class="panel">
<div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
<div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
<div id="theFooter" class="panel-footer collapse in">
<button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
</button>
</div>
</div>
</div>
I am opening this page http://www.ebay.com/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766
and checking to see if the blue ribbon is visible as mentioned in the image
Here is my test
<tr>
<td>open</td>
<td>/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766</td>
<td></td>
</tr>
<tr>
<td>isVisible</td>
<td>//div[#class='vi-notify-msg']</td>
<td></td>
</tr>
And expecting it to fail but surprisingly it passes every time...what am i missing here?
EDIT:
I am expecting the test to fail because the ribbon takes time to appear after the page is loaded and the command isVisible executed before the ribbon is visible..so it should fail right?
If you look at the HTML, the element is there as the page loads. It's only styled to fade in after the page finishes loading, but from an HTML perspective, it's "visible" the entire time the page is loading:
As the page is loaded:
<div id="vi_notification" class="vi-notify-cmp" style="top:25%;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify- close-btn">x</button>
</div>
</div>
</div>
Only after it fades out does the styling change to display:none:
<div id="vi_notification" class="vi-notify-cmp" style="top: 25%; left: 10px; display: none;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify-close-btn">x</button>
</div>
</div>
</div>
If you look at the element as it loads using the Chrome Developer toolbar, you'll see where it is "visible", but the styling updates to slowly fade it in so our human eyes can see it.
This means that when the page is loading / loaded, the element will return as displayed. After it fades out, I would expect displayed to return false, since the styling on the parent div was changed to display:none.
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.