I have different pop-up with similar className but with different TEXT. I am not able to identify the different pop-up's due to the similarity.
Right now I am using xpath : //*[#id='popupMessageContentDiv']/div[2] ---- (For All Pop-up)
Here is the HTML Code:
<div class="modalContent dynamicWidth">
<div class="padDiv msgcontent f14">
<div class="bld f14 "> text text </div>
<div class="btnok mr50px mt20px">
<a class="simplemodal-close" title="OK"/>
</div>
</div>
</div>
Is there anyway to diffrentiate the Pop-up.
Related
Referencing the image below, I do not understand why the images are overlapping. I have tried to reduce the image dimensions as well as use class="img-responsive". Adjacent to the column described by the code below is another col-md-6. Both col-md-6 are contained within a row.
<div class="col-md-6">
<ul>
<li>
When a user long presses on a cell, they will be presented an alert allowing them to either
edit the name of a given item, delete the item, or cancel the alert:
</li>
</ul>
<div class="row">
<div class="col-md-3">
<img src="images/ListMakeriOS/edit_or_cancel.png" alt="Initial long press dialog" width="300px">
</div>
<div class="col-md-3">
<img src="images/ListMakeriOS/edit.png" alt="Edit option selected after long press"
width="300px">
</div>
</div>
</div>
This happened to me also. .img-responsive is now .img-fluid in bs4+
I would remove the width="300px" which is wrong syntax anyway.
BTW, maybe you need to use .col-md-6 instead of .col-md-3 if you want the images to split evenly.
I would like to view list of strings in default-label format of bootstrap with angular-js ng-repeat
Following is a code snippet,
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
</div>
</div>
Output of above does not looks good. default label fills col-md-2 and also if list is big then it goes out of row div.
I would like to have output as following
How can I acheive following with default-label from bootstrap classes?
And I would like to use only classes/styles provided by bootstrap and NOT custom css.
You dont need the col-md-2 class on the span element:
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
</div>
</div>
You can read up more on the label variations on the bootstrap website
A note from the bootstrap website:
Have tons of labels? Rendering problems can arise when you have dozens
of inline labels within a narrow container, each containing its own
inline-block element (like an icon). The way around this is setting
display: inline-block;. For context and an example, see #13219.
UPDATE
If you are using the ng-repeat directive directly on a label label- you might end up with labels that do not have spacing between the labels. This is related to this question and this question
You might end up with labels looking like this:
I have created a jsfiddle to show the two results, you might need to update your HTML to fix the spacing issue.
You can use the following HTML to resolve the issue if you do not want to add a custom class with margin:
<div class="row">
<div class="col-sm-12">
<span ng-repeat="label in labels">
<span class="label label-default">{{label}}</span>
</span>
</div>
</div>
The result:
Answer by Tjaart van der Walt looks perfect.I also did work around and found following answer,
<div class="row">
<ul class="list-inline col-md-6">
<li ng-repeat="hobby in hobbies">
<span class="label label-default">{{hobby.name}}</span>
</li>
</ul>
</div>
it seems to be simple , our designer made the a design of 3 different forms in one like page
as you may see in this snippet
I don't think we can do this design with valid html in twitter bootstrap grids ?
where you would get the form opening and closing tags and keep it valid
<div class="container">
<div class="col-md-4">
<div class="row"><div class="form1">form1</div></div>
<div class="row"><div class="form2">form2</div></div>
<div class="row"><div class="form3">form3 </div></div>
</div>
<div class="col-md-4">
<div class="row"><div class="form3">continue of form3 </div></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form3">
continue of form3
</div>
</div>
</div>
</div><!-- /.container -->
You cannot split a form element so that one part is inside one element and another part is inside another element. HTML syntax prevents that.
You can, however, have input elements and other controls outside a form element and associate them functionally with it using form attributes. Browser support is still too limited to make this a feasible option in normal situations.
I have some segments that are similar on my page, same setup - one icon-logo and one text-area:
<div class="row-fluid">
<div class="span7">
<img src="img/icon2.png" alt="" />
</div>
<div class="span4">
<h6>My Text Area</h6>
<p>Description of that functionality<br>
Multi lines of text<p>
</div>
</div>
Just basically an icon and a description text, started out with having 2 of these which is alright, now there is 8 and i think i would like to gather it in one segment, but then slide between the 8 icons/descriptions.
So my question is, any chance or any component available where i can put in 8 of these in a slider-effect way ? most sliders I've looked at is image sliders, but since i need to have multi-language i don't want to convert the 2 spans into 1 image.
I am not an expert in web development so an example would really be appreciated if its possible.
You can use bootstrap carousel for this.
This is the markup they expect
<div class="carousel-inner">
<div class="active item">[here]</div>
<div class="item">[here]</div>
<div class="item">[here]</div>
</div>
All you need to do is to have your two spans inside the element with class item.
Check this fiddle. Hope this is what you wanted.
I am using microformat for the first time.
So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.
This is the existing code that was present on the page:
<div class="evD mr10">
<div class="imgH fl"><img /></div>
<div class="infAr">
<h3>EVENT NAME</h3>
<h4><span>at</span>VENUE NAME</h4>
<p>Event Description</p>
<a class="tdd" href="#">Genre</a>
</div>
<div class="dth">
<div class="sfrD fl">
</div>
<div class="strE sn fl">
</div>
<div class="Buy">
<a class="bkT" href="buy_link"></a>
</div>
</div>
</div>
The Changes I made include :
Change the doctype to html5, and added microformat classes.
<div class="vevent evD mr10">
<div class="imgH fl"><img class="photo" /></div>
<div class="infAr">
<h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
<h4 class="location"><span>at</span>VENUE NAME</h4>
<p class="description">Event Description</p>
Genre
</div>
<div class="dth">
<div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
<div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
<div class="Buy tickets">
<a class="bkT offerurl" href="buy_link"></a>
</div>
</div>
</div>
I have the following questions/doubts :
Is it ok to have existing classes alongwith the microformat tags as done above?
As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank.
How do I counter from a search engine reading as blank.
Thank you.
(Sorry about the question being so long)
1) that is no problem. You can even combine multiple types of semantic markup on the same tags.
2) 3)
If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.
You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.