I am trying to print out the text in the nested divs.
I am using page-object gem with ruby in the cucumber framework.
The HTML is as follows:
<div class="tab-pane fadeIn animated active" id="ssl-settings-client">
<div class="row">
<div class="row">
<div class="panel-group" id="profiles">
<div class="with-2-cols-md">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading heading-clickable" data-target="#profile-111" data-toggle="collapse">
<div class="pull-right">
<div class="btn-group btn-group-sm mtn5 mrn10">
<a title="Edit" class="btn btn-default" href="/customers/388/edit"><span class="fa fa-pencil"></span></a>
<a class="btn btn-default" href="/customers/initialize_new"><span class="glyphicon glyphicon-duplicate"></span></a>
<a data-confirm="Are you sure?" title="Delete" class="btn btn-default" rel="nofollow" data-method="delete" href="/customers/388"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<div class="collapsed accordion-icon profile-name" data-target="#profile-388" data-toggle="collapse">
automated_front_end
</div>
I tried to use the following code:
div = div_element(:text => 'automated_front_end').text
How would you go about it?
thx
Related
I am bit struggling to make spaces in between, I am using ml-auto. What I want to achieve is separate each control have its using spaces in between, "Core Status label" should be far each other and be on horizontal line between the two. This is what I have so far on the bootstrap;
<div class="row">
<div class="col-xs-3 ml-md-auto"></div>
<label for="Core Status" class="col-form-label">Core Status</label>
</div>
<!--Viewing button/modules-->
<div class="form-group row">
<div class="col-xs-3 ml-auto"></div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
<div class="col-xs-5 ml-2">
</div>
</div>
If you want your controls to be in horizontal, within one row add controls and add mr-auto.
<div class="container-fluid">
<div class="row">
<label for="Core Status" class="col mr-auto">Core Status</label>
<div class="col">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
</div>
</div>
</div>
Please find the demo
I'm trying to make a card of ship information for a game, but for each ship there are multiple veriations. e.g "Large Clipper" and a "Festive Large Clipper".
But on the dropdown menu my list items work once, and then don't return to an inactive state.
JSFiddle
<div class="p-0">
<div class="container">
<div class="row">
<div class="col-md-12" style="">
<div class="tab-content">
<div class="tab-pane fade show active" id="adventure" role="tabpanel">
<div class="card" style="">
<div class="card-header"><img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Large Clipper</h4>
<div class="btn-group float-right">
<button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
<div class="dropdown-menu" aria-labelledby="variationsDropdown">
<a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
<a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="large-clipper">
<div class="card-body">
<h6 class="text-muted">
Just a big and fast clipper.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="festive-large-clipper">
<div class="card-body">
<h6 class="text-muted">
A large clipper but with fancy plating.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see what I mean when you press on the items from the "Variations" dropdown.
Apparently it's a bug, found my solution here (github).
had to add
$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
{
$(".dropdown-item.active").removeClass('active');
});
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>
I'm using Bootstrap 3. I wish to prevent Bootstrap from changing the styling of the page when the width goes below 768px. The reason is that Bootstrap will stack div rows on top of each other and I don't want that.
Here's what I did:
#media (max-width : 768px) {
.container {
width: 800px;
}
}
It successfully set the container width to 800px but it didn't prevent the styling of the container from being changed (i.e. the elements are still being stacked).
HTML:
<div class="container">
<div class="clearfix inbox-panel row">
<div class="convo-panel col-md-5 col-sm-5 col-xs-5">
<div class="clearfix panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">Inbox</li>
<li role="presentation">Sent</li>
</ul>
</div>
<!-- List group -->
<ul class="convo-list list-group">
<div class="push"></div>
</ul>
<div class="convo-footer">
<div class="convo-features">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="edit-convo-button btn btn-default">Edit</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="mark-all-read-button btn btn-default">Mark all as read</button>
</div>
</div>
</div>
<div class="convo-options">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="mark-read-button btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
Mark as read
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="delete-convo-button btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
Delete
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="cancel-button btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix chat-panel col-md-7 col-sm-7">
<div class="clearfix chat-header row">
<div class="sender-chat-photo col-lg-1 col-md-1 col-xs-2">
<img class="img-circle" src="/images/no_photo_thumb.png">
<div class="online-indicator"></div>
</div>
<div class="sender-chat-info col-lg-8 col-md-7 col-xs-5">
<p class="truncate list-group-item-heading sender-name">
<span class="vip-label label label-default"></span>
</p>
<p class="truncate small list-group-item-text sender-location"></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-5">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options </span>
</button>
<ul class="dropdown-menu">
<li>Block user</li>
<li role="separator" class="divider"></li>
<li>Report user</li>
<li role="separator" class="divider"></li>
<li>Delete conversation</li>
</ul>
</div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
<div class="clearfix chat-box">
</div>
<div class="clearfix chat-input-panel">
<div class="clearfix row">
<div class="chat-input-form col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 form-group">
<textarea class="form-control" rows="4" id="chat-input" placeholder="Type your message here..."><%= current_user.token %></textarea>
<button type="button" class="chat-input-button btn btn-default">Send</button>
<div id="clear" style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="/javascripts/chat.js"></script>
<script>
startChat('<%= current_user.token %>');
</script>
You will chase your tail forever with the method you've tried. Presuming you're not using SASS or LESS where you can set variables before the Bootstrap CSS is generated, try using the Bootstrap Customizer. Go to customizer's breakpoints section and set the #screen-sm variable to a lower value like 650px.
In order to have 3 elements into a panel header I tried this :
<div class="panel panel-primary">
<!-- Default panel header contents -->
<div class="panel-heading">
<h4 class="panel-title">
<div class="pull-left">
<h4 class="panel-title"> <i class="glyphicon glyphicon-user"></i>
Users
</h4>
</div>
<div class="header-center">
<pagination class="panel-title" ng-show="totalItems > pageParameters.size" items-per-page="pageParameters.size" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-change="changePage()"
previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
</div>
<div class="pull-right">
<span class="panel-title btn-group">
<button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm" ng-click="addUser()">
<span class="glyphicon glyphicon-plus text-primary"></span>
<span class="text-primary"><strong>Add</strong></span>
</button>
</span>
</div>
</h4>
<div class="clearfix"></div>
</div>
</div>
And .less file corresponding :
.header-center {
display: flex;
justify-content: center;
align-items: center;
}
But this renders :
I need the add button to be aligned with other elements..
You can use bootstrap grids to solve this problem
you can use col-xs-3,col-xs-6,col-xs-3 to create 3 parallel columns
check the code for more clarification http://jsfiddle.net/5doxw0ea/
HTML:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container-fluid panel-container">
<div class="col-xs-3 text-left">
<h4 class="panel-title abc">
<i class="glyphicon glyphicon-user"></i>
Users
</h4>
</div>
<div class="col-xs-6 text-center ">
<ul class="pagination panel-pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
<div class="col-xs-3 text-right">
<span class="panel-title btn-group">
<button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm abc" ng-click="addUser()">
<span class="glyphicon glyphicon-plus text-primary"></span>
<span class="text-primary"><strong>Add</strong></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
CSS:
.panel-pagination {
margin: 0 0 !important;
}
.panel-container {
padding-right: 0 !important;
padding-left: 0 !important;
height:35px;
}
.abc{
height:35px;
display:table-cell !important;
vertical-align:middle;
}
You could also just move the third div pull-right above the second div header-center if you don't need a full grid there.