Why is the class mentioned in the p tag not applying in Chrome but working in IE and Firefox?
<p class="p_error"><?php print $this->validation->errorValue;?></p>.p_error{
color:red;
text-align:left;
font-size:12px;
}Any hints or reasons why it's not working?
From the Chrome output -> using inspect element ->
<p class="p_error"></p>
<p>The Treated By field is required.</p>
By default, the system automatically wraps error messages in a paragraph tag (<p>). If you want to modify these wrappers, simply use the following code snippet in your controller:
$this->validation->set_error_delimiters('<div class="custom-error">', '</div>');More information can be found at: http://codeigniter.com/user_guide/libraries/validation.html
Can you share a snippet of your CSS code? It should resemble the following:
.warning_message {
color: orange;
font-weight: bold;
}
This snippet of code was generated by a PHP script:
<p class="p_error"><p>The Treated By field is required.</p></p>
According to the HTML specification:
P element cannot be nested within another P element</P> tag may be omitted as it is impliedThese guidelines allow for writing code like this:
<p>First paragraph
<p>Second paragraph
In this scenario, the browser will automatically close the first paragraph before starting the second one with <p>.
Due to these rules, the error message appears outside of the p_error paragraph, as shown in the "inspect element" feature:
<p class="p_error"></p>
<p>The Treated By field is required.</p>
In a nutshell, it's not a good idea to nest <p> tags within each other because web browsers can get confused when presented with
<p><p>content</p></p><?= form_error('lastname_error', '<p class="p_error">', '</p>'); ?>
You could utilize the built-in wrapper arguments like above, or alternatively, you can enclose the content inside a tag that can contain <p>, such as a <div>.
<div class="p_error"><?php print $this->validation->lastname_error;?></div>
Just remember that if you go the <div> route, you'll need to style the container instead of using styles for the <p> element.
By default, the system surrounds each error message with a paragraph tag (<p>). To customize these delimiters, simply add this code snippet to your controller:
$this->validation->set_error_delimiters('<div class="error">', '</div>');Check out more details at: http://examplewebsite.com/user-guide/validation-library
It seems likely that the $errorValue variable contains additional HTML tags that are conflicting with the styling of <p>
Ensure to hold down the Shift key while refreshing your page to ensure that your browser properly loads the updated CSS (if you have added any p_error since originally loading the page).
There's currently nothing within your
<p class="p_error"></p><?php echo form_error('your_field'); ?>
and for custom error styling
<?php echo form_error('your_field', '<p class="p_error">', '</p>'); ?>
Important reminder: Within your view, $this does not function as it requires a class context to operate.
To rectify the issue, a quick solution would involve modifying your code as shown below:
CSS (unchanged)
.p_error{ color:red; text-align:left; font-size:12px; }
PHP (replacing P with DIV)
<div class="p_error"><?php print $this->validation->errorValue;?></div>
I've been attempting to remove a loading bar from my website, but I can't seem to locate it in the site files. I even tried using Google Chrome's inspection tool, but I couldn't pinpoint the loader. Can someone please assist me? Visit ...
I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...
https://i.stack.imgur.com/U1097.png description of image goes here Issue with module: Error: The file '../containers/Login' could not be found in the 'react-shop/src/components' directory. ...
Recently, I created a CSS div using Bootstrap and added some custom styling. You can check out the fiddle for a live demo of the code: https://jsfiddle.net/w9gyc0t5/. Here's the actual code: <!-- Bootstrap docs: https://getbootstrap.com/docs -- ...
Is it possible to have a dialog with scrollable content on top of a page that is also scrollable, but when trying to scroll inside the dialog using the mouse wheel, only the dialog body scrolls and not the page below it? What approach can be used to accom ...
I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...
Hey there! I'm currently working on a landing page and I have this amazing idea to use a stunning picture of clouds with a transparent background layered over a beautiful landscape. The only problem is that when I try to implement it, the transparency ...
I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...
How can we create a feature where, upon clicking "Apply Coupon" in Image 1, a window slides in from the left just above the webpage (as shown in Image 2)? Additionally, in Image 2, there is a blue transparent color on the webpage adjacent to this sliding w ...
Can someone help me with styling my code? I want to display a text message inside a square box with dimensions of 1x. <span class="fa-stack fa-5x" style="margin-left:5%"> <i class="fa fa-square-o fa-stack-2x"></i> </span> ...
This is my first attempt at working with responsive design, and I seem to have encountered a bug. When I shift part of the browser off-screen and expand it to around 1345 pixels, it seems to trigger the CSS set for 1224 pixels. //Currently, only @media al ...
Currently, I am developing a React Component that includes a DatePicker feature using PrimeReact's Calendar component. I have a specific requirement to display an arrow on top of the datepicker when it pops up. You can view the desired layout in the ...
When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...
Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...
After downloading a new font and setting font-variant: small-caps;, I noticed that my numbers appear much larger than the letters. Is there a way to apply small caps only to the letters, not the numbers? While traditionally numbers do not have a capital ...
Is there a way to align multiple elements of varying heights against the top of a container, similar to what is seen on Wolfram's homepage? I noticed that they used a lot of JavaScript and absolute positioning in their code, but I'm wondering if ...
I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...
If we want to apply an SVG filter on a canvas element, there are different ways to achieve this. According to this resource, we can apply a SVG filter to the CanvasRenderingContext2D in javascript using the following code snippet: ctx.filter = "url(#b ...
Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...
I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...