i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search
Related
So I am trying to understand the BEM naming structure. So lets say I have the following html
<div class="banner">
<div class="banner__toprow">
<span class="banner__teamName">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
Now where I get confused is when you have nested divs, how that works. For example for banner__teamName, I would usually do banner__toprow__teamName. Now maybe I can do this, but does this break BEM?
From the BEM's FAQ
What would be a class name for an element inside another element? .block__el1__el2?
According to BEM method, block structure should be flattened; you do
not need to reflect nested DOM structure of the block. So, the class
names for this case would be:
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
Whereas the DOM representation of the block may be nested:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'>
<div class='block__elem3'></div>
</div>
</div>
Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>
I would suggest doing it like this:
<div class="banner">
<div class="banner__toprow">
<span class="banner__toprow-teamname">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
I don't believe it is correct to have two Elements (__) of Modifiers (--). I also try not to use camel case in my classes, that might be a personal preference but I feel it could cause problems with certain frameworks like Angular.
Recently I have started using BEM in my project to organize CSS but now I am up to the point where i have html like this:
<div class="container">
<div class="container__header">
<div>TITLE</div>
<div>SUBTITLE</div>
</div>
<div class="container__body">
</div>
</div>
As I am more familiar with SMACSS I treat container with header and body as layout related styles. But then content of header on each subpage will differ, sometimes it will have title/subtitle that need different styling sometimes it will be some completly different structure. In terms of SMACSS I would put it in module folder and manage there but now with BEM would be it good practice to now create element such as note-header that will have elements __title and __subtitle?
<div class="container">
<div class="container__header note-header">
<div class="note-header__title">TITLE</div>
<div class="note-header__subtitle">SUBTITLE</div>
</div>
<div class="container__body note-body">
...
</div>
</div>
The problem I have with this approach is that note-header will most of the time probably be empty class just for the sake of naming convention. What is best practice to handle such case
I personally use three types of elements, namely:
l- prefixed layout elements, such as containers, headers, footers.
b- prefixed block elements, such as a menu, a small header inside a layout, etc.
c- prefixed component elements, such as buttons, links etc.
This in conjunction with modifiers say: c-button--white and c-button--black works fine.
Consider the following structure for your example:
<div class="l-container">
<div class="b-note">
<div class="b-note__title">TITLE</div>
<div class="b-note__subtitle">SUBTITLE</div>
<div class="b-note__content">
<div class="c-button">
<button class="c-button__button">Submit</button>
</div>
</div>
<div class="b-slideshow">
<div class="b-slideshow__title"></div>
</div>
</div>
</div>
In my projects, it's vital to make sure general styling is separate. Therefore I try to minimise any blocks / classes being used throughout other elements. This avoids styling drama later on because you're using b-note-header__title somewhere else as well, that requires just a small adjustment, but changing the main rule messes up your other titles.
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.
I'm using Twitter Bootstrap, but I'm having slight difficulties on a particular element.
Here is a 'Scaffolding' markup already provided by the interface, which I will use as an example.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Also, to help this case... There are 'Responsive utility classes', which you can check out here - http://twitter.github.com/bootstrap/scaffolding.html#responsive
So, what I am looking to do is simply change the class="span3" to, for example, class="span6" when I am using the 'responsive utility class' .visible-tablet.
Initially, I thought that it would miraclely automatically change to the 'max-width', but it didn't, unfortunately.
As #scumah pointed out, you're not going to change the class using CSS. For that you would use JS.
However, if you want to change the characteristics of a class (in this case span3) when it is contained in an element with a given class (here visible-tablet) that's just a matter of getting your CSS selectors working:
.visible-tablet .span3 {
width: 352px;
}
This would change the span3 to be identical to what is, by default, the width of a span6.
JSFiddle
However, all this seems a bit hackish, so you might want to reconsider what essentially you're trying to accomplish.