I know that <p> is to be used specifically with inline elements. But what if you change an inline element like <span> into a block-level element using { display:block } and contain it within a <p>?
ie.
<html>
<head>
<style>
p {
background: red;
height: 100px;
width: 100px;
}
p span {
display: block;
background: blue;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<p>
<span>I am a pizza</span>
</p>
</body>
</html>
Is that just wrong in every sense of the word? I know it is not common (ie. most would question why I didn't just use a div) but it's a hypothetical situation. It passes validation tests, but is it sloppy as all heck/bad practice? Would you scoff if you read that code?
A span element is always a text/inline/phrase element in HTML, and the HTML syntax rules that restrict p element content to such elements relate to HTML only. So they are not affected by CSS settings that may make a span a block element in the CSS (rendering) sense.
In CSS, you can assign any defined value to the display property, no matter what the element is like. CSS is ignorant of the meanings of elements as defined in HTML or other markup language specifications.
Thus, there is no formal objection.
Whether it is good style, or otherwise acceptable, is more complicated. There does not seem to be any statement on this in specifications, but it is reasonable to say that you should not change basic rendering features elements in vain. For example, in normal conditions, you should not use span and then say display: block in CSS, when there is the more logical approach of using div. One reason to this principle is that it keeps your document in a better shape in non-CSS rendering situations or when all or some of your style sheet is not applied.
On the other hand, you would not change display in vain if you have a text paragraph and you wish to render part of its content as a block, e.g. as a centered or indented line, possibly with a background color that stretches through the available width. You cannot use div inside p, so the more natural markup is not available.
Since the example is not a real one, it is impossible to say whether it is OK to deploy this approach in your case.
It's HTML5 valid and it's not that bad in certain situations e.g.
<p>
This is some text <span class="highlight">I am a pizza</span> and this is some more text...
</p>
.highlight {
background: yellow;
}
Related
I'm new to Materialize and Angular. I have the exact same question as the question in this thread Change the default color of materialize.css input fields. I have attached screenshot
However, the solutions do not answer the question. I implemented this code in styles.css:
input:focus {
border-bottom: 1px solid #005DAB !important;
box-shadow: 0 1px 0 0 #005DAB;
}
label:active {
color: #005DAB;
}
Here's what I'm seeing:
What I'm seeing is the bottom border changes to blue (which is what I wanted). However, the label changes to blue temporarily (I'm assuming while it's active) and then it goes back to teal.
How do I make the selected label remain blue (#005DAB).
Hey the problem here is that the default CSS rules of materialize outweigh the custom rule you have defined.
You can read more about this here :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
In short the most specific rule overwrites the other so in order to make your change appear you need to make your rule more specific.
There's multiple ways of going about this like using the id in the selector or adding !important to your rule.
However these methods are not recommended, you can rewrite the original CSS rule or add a custom class to add weight to your selector
<div class="input-field col s12 label-color-alternate">
<input id="password" type="password" class="validate">
<label for="password" class="">Password</label>
</div>
For example I added a class "label-color-alternate" to the outer div, if we add this class to our selector it'll give us the necessary specificity.
div.row > div.input-field.label-color-alternate > input+label.active {
color: #005DAB;
}
You can of course experiment with the best way to write your selector and to which elements you want to add custom classes.
I hope this helps !
set this in your external css:
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 2px solid var(--yourcolor);
box-shadow: 0 0 0 0 var(--yourcolor);
}
So I have a page with multiple dropdowns (with the same choices) when automating a webpage using Capybara and Chromedriver.
They are all react-select's (Which I have a helper file for). Sadly they ALL have the same label text (but not label ID....however I don't think page.select works for label ID).
I thought about doing a page.all on the react-selects? and then just going through the array? Is that possible?
the react-select looks pretty standard, I realize the span has an id but selecting by that doesn't work for react-selects from what i've been able to tell.:
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-6--value">
<div class="Select-placeholder">Select...</div>
<div class="Select-input" style="display: inline-block;">
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-6--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"></div>
</div>
</span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
Could I maybe just pull it in via page.all? The react helper I have does this:
module CapybaraReactHelper
def capybara_react_select(selector, label)
within selector do
find('.Select-control').click
expect(page).to have_css('.Select-menu-outer') # options should now be available
expect(page).to have_css('.Select-option', text: label)
find('.Select-option', text: label).click
end
end
end
Any ideas?
Thanks!
Selecting by the id on .Select-multi-value-wrapper isn't working because that span isn't the react-select component's top-level tag. Working with react-select and Capybara generally is difficult because the Capybara form helpers won't work with react-select's custom markup and behavior.
As you've mentioned, you can get around this by using a version of your existing helper with a scoping within block and page.all(). For example:
# helper
def react_select_capybara(selector, option)
within selector do
find('.Select-arrow-zone').click
expect(page).to have_css('.Select-menu-outer')
find('.Select-option', text: option).click
expect(page).to have_css('.Select-value-label', text: option)
end
end
# usage
given(:select_values) { ['Grace Hopper', 'Ada Lovelace'] }
...
react_selects = page.all('.Select')
select_values.each do |select_value, i|
react_select_capybara(react_selects[i], select_value)
end
While this will work, it is brittle - it relies on the implicit ordering of your react-selects on the page. A more robust setup would pass each react-select component a custom classname to uniquely identify it in your test. From the react-select docs on custom classnames:
You can provide a custom className prop to the component, which will be added to the base .Select className for the outer container.
Implementing this might look like:
# JSX
<ReactSelect className="js-select-user-form-1" ... />
<ReactSelect className="js-select-user-form-2" ... />
# Spec
react_select_capybara(".js-select-user-form-1", 'Grace Hopper')
react_select_capybara(".js-select-user-form-2", 'Ada Lovelace')
page.select doesn't work for this because it only works for HTML <select> elements. This is a JS driven widget, not an HTML <select> element.
If you are just automating a page (not testing an app) it'll probably be easier just to use JS (via execute_script) to set the value of the hidden <input>s.
If you are testing an app, then you can use page.all to gather all the react-selects and step through, as long as selecting from any react-select doesn't replace any of the others on the page (which would leave you with obsolete elements).
If that doesn't provide enough info to solve your problem, and your real issue is trying to pick a specific react-select to select from, then please add enough HTML to your question so we can see what actual differences exist between the widgets you're trying to choose from (2 different react-select elements for instance)
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
How are widgets rendered in Dojo? What is the flow or sequence with which various JSs are called. I am trying to understand how the internal code is contructed for widget.
For example: If TabContainer is used , we can see the following code:
<div dojoattachpoint="containerNode"
class="dijitTabPaneWrapper
dijitTabContainerTop-container dijitAlignClient"
aria-labelledby="tabContainer_tablist_dijit_layout_ContentPane_0"
style="left: 0px; top: 28px; position: absolute; width: 748px; height: 335px;">
So how is Dojo constructing all these?
Many widgets use html templates. On top of the templates, various functions are triggered during the widget life cycle. There, you can manipulate the dom programmatically.
For information on how this is done, read the following links :
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
http://www.sitepen.com/blog/2008/06/24/creating-dojo-widgets-with-inline-templates/
https://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/
There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.
I try to have a input of text like the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though
If you use html5 you can use:
<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>
If you couple this with the css:
#divThatYouCanWriteStuffIn {
min-height: 4em; /* it should resize as required from this minimum height */
}
To get rid of the 'annoying little triangle' in textareas:
textarea {
resize: none;
}
JS Fiddle demo of both ideas.
I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS
The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:
textarea { resize:none; }
That will make the triangle disappear.
You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..
So you can target all textareas or ones with specific classes or ids on them
Example:
textarea {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:140%;
color:black;
margin:0 0 5px 5px;
padding:5px;
background-color:#999999;
border:1px solid black;
}
This example will target all textareas on the page.
Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.
Hope this helps.