Never had this issue before. Go to this website. As you can see, "sss" and "sssss" are put in two divs with class "col-xs-*". They should appear on same row, not sure why it's not working.
your "menuDiv" has float: left and that ruins the flow
either remove that, or add a float to the "mainDiv" as well
as You are using XS-Xtra small , column type it will display as column on XS-devices for general use Use
<div class="col-7">your content
</div>
<div class="col-5">your content
</div>
Related
<div class="block wbc">
<span></span>
<span> text_value </span>
</div>
for getting text in second span where does below code go wrong?
driver.find_element(X_PATH,"*//div[#class='block']/span[1]")
For trying by yourself, maybe I write sth wrong here is link
https://soundcloud.com/daydoseofhouse/snt-whats-wrong/s-jmbaiBDyQ0d?si=233b2f843a2c4a7c8afd6b9161369717&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing
And my code; still giving an error
playbackTimeline__duration =driver.find_element(By.XPATH,"*//div[#class='playbackTimeline__duration']/span[2]")
For finding web element clearly:
//*[#id="app"]/div[4]/section/div/div[3]/div[3]/div/div[3]/span[2]
But I will not use this way, I need declare with class method or CSS Selector at least
If you are sure that you always need the second span use this XPath:
*//div[#class='playbackTimeline__duration']/span[2]
If you need the first span that has actual text use this:
*//div[#class='playbackTimeline__duration']/span[normalize-space()][1]
If the #class has more than only playbackTimeline__duration in it you can use:
*//div[contains(#class,'playbackTimeline__duration')]/span[2]
If there are more div's like that use:
*//div[contains(#class,'playbackTimeline__duration')][1]/span[2]
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.
Only the content of the div is unique. So, in the following dynamically generated html, only "My Article-1245" is unique:
<div class="col-md-4 article">
<h2>
My Article-1245
Delete
Edit
</h2>
<p>O ephemeral text! Here today, gone tomorrow. Not terribly important, but necessary</p>
</div>
How do I select the edit/delete link of this specific div, using Selenium? assertText/verifyText requires an element locator, but I do not have any unique id/name (out of my control). There will be many such div blocks, with other content text, all dynamically generated.
Any help would be appreciated.
If text 'My Article' appears each time, you may use following:
//For Delete
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Delete']"));
//For Edit
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Edit']"));
Hope it meets your requirement :)
Matching by text is always a bad automated testing concept. If you want to keep clean and reliable test scripts, then :
Contact your web dev to add unique identifiers to the elements
Suck it up, and create selectors based on what's there.
You are able to create a CSS selector based on what you want.
What you should do is create the selector using parent-child relationships:
driver.findElement(By.cssSelector("div.article:nth-child(X) a[href^='delete']"));
As I am ignorant of your appp, this is also assuming that all of your article classes are under the same parent. You would substitute X with the number of the div you want to refer to. e.g.:
<div id="someparent">
<div class="...article" />
<div class="...article" />
...
</div>
I have a Bootstrap 3 layout like this
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
Normally this displays the first column as 66% and the second column as 33%
When I have no content for the second column, I want to be able to hide it and make the first column take up 100% width. I think it can be done with a mixins but while I'm trying to get that working, is there a better way?
If it's empty you can add the class .col-md-12 after col-md-8 and add class .hide to the col-md-4. I don't know how you're implementing your site. If it's a CMS, you can have a little checkbox to add these classes if col-md-4 == empty.
If you're hiding at different breakpoints, look at the responsive utilities section of the TWB docs.