newcoder1010
-
Posts
526 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by newcoder1010
-
Thanks.
-
Hello, HTML: <section class ="patent"> <div class ="child"> </div> </section> CSS: .parent{text-align:center;} It centers everything inside child class. .child{margin:0 auto;} It does nothing. How can I place div class child in the center of the page? I will have other div classes inside child classes. I would like to center child div instead of centering elements inside the child class. Please advise.
-
If I put accordion outside column class, it works within the column. But I need to be able to do it in both column. That means it allows me to expand two elements at once. One element from each column. I guess it is because each column has its own parent. How can I have same parent for both columns so two columns can have most one element expanded?
-
I tried this but did not work. I am trying to put them in two columns. Only one can be expanded at once but multiple being expanded. Can you please provide me a sample code to do it? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Accordion Example</h2> <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> <div class="panel-group" id="accordion1"> <div class = "col-lg-6 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse "> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div> <div class="panel-group" id="accordion2"> <div class = "col-lg-6 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse "> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Collapsible Group 4</a> </h4> </div> <div id="collapse4" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div> </div> </body> </html>
-
I will try it. I am trying to create questions and answers which can be expandable and collapsible. Is there better way to do it? Thanks.
-
Hello, I have two columns using bootstrap classes. I have 5 element each column. Left column expands collapse just fine. That means only one element can be expanded at once. But right column, it allows multiple elements to be expanded at once. How can I allow only one element to be expanded at once for all the elements? Thanks. https://www.w3schools.com/bootstrap/bootstrap_collapse.asp <h2>Accordion Example</h2> <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse "> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 4</a> </h4> </div> <div id="collapse4" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 5</a> </h4> </div> <div id="collapse5" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div> <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group 6</a> </h4> </div> <div id="collapse6" class="panel-collapse collapse "> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Collapsible Group 7</a> </h4> </div> <div id="collapse7" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group 8</a> </h4> </div> <div id="collapse8" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 9</a> </h4> </div> <div id="collapse9" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse10">Collapsible Group 10</a> </h4> </div> <div id="collapse10" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div>
-
Hi, <div class="field field-name-field-step-no field-type-text field-label-hidden"> <div class="field-items"><div class="field-item even">1</div></div></div> .field-name-field-step-no { font-weight: bold; font-size: 46px; padding: 0; vertical-align: top; } https://drive.google.com/open?id=0B7xIEuVi005ydnFBUVJmY2hQRFk I still see some on top of the element. How can I vertically align to top?
-
How to have an inline form centered and responsive
newcoder1010 replied to newcoder1010's topic in CSS
Thanks. It worked now. -
Hello, I would like to have a responsive inline form. Form only has header, a text field and submit button. Form should be centered in every device. <section id="block-webform-client-block-66" class="block block-webform bnh contextual-links-region clearfix"> <h2 class="block-title">Get Your Offer NOW!</h2> <form class="webform-client-form webform-client-form-66" action="/" method="post" id="webform-client-form-66" accept-charset="UTF-8"> <div> <div class="form-item webform-component webform-component-markup webform-component--get-your-fair-cash-offer-now form-group form-item form-type-markup form-group"> <h2>Enter Address NOW!</h2> </div> <div class="form-item webform-component webform-component-textfield webform-component--property-address form-group form-item form-item-submitted-property-address form-type-textfield form-group"> <input required="required" placeholder="Property Address" class="form-control form-text required" type="text" id="edit-submitted-property-address--2" name="submitted[property_address]" value="" size="60" maxlength="128"> <label class="control-label element-invisible" for="edit-submitted-property-address--2">Property Address <span class="form-required" title="This field is required.">*</span></label> </div> <input type="hidden" name="details[sid]"> <div class="form-actions"><button class="webform-submit button-primary btn btn-default form-submit" type="submit" name="op" value="Get Your Offer">Get Your Offer</button> </div> </div> </form> </section> #block-webform-client-block-66{ background: bisque; padding: 0; margin: 0; text-align: center; } .webform-client-form-66 { display: block; text-align: center; } .webform-client-form-66 .webform-component--property-address { margin-top: 0px; /* display: inline; */ margin-top: 0; text-align: center; margin-bottom: 33px; float: left; } .webform-client-form-66 .form-actions { clear: none; margin-top: 0; float: left; margin-left: 40px; } Now the header is centered but the form floated to left. I tried to make the form 50%width and then margin:auto. Then it works somewhat. Please advise how to place the form centered and responsive.
-
Not able to see complete top bar in mobile phone when I scroll down
newcoder1010 replied to newcoder1010's topic in CSS
I tried with top:0; but did not work. -
Hello, I have a region where I placed a phone block. When I visit the page on mobile browser, it looks just fine. As soon as I start scrolling down, I do not see the complete block. About 20 % on the top gets truncated when I scroll down. When I scroll back up, it looks normal. Please see the image for details. Please advise. https://drive.google.com/open?id=0B7xIEuVi005yUjYwNkw3UTB5ME0 Thanks.
-
Thank you. It helped.
-
Hello, I am seeing some styling issues on my mobile browsers. When I make the laptop's browsers screen sizes same as mobile, I do not see the same issue. So, I am thinking to inspect the elements on my phone and see if I can fix it. How can I inspect the mobile browsers? Thanks.
-
Update - The block I placed it at the header. So when I scroll down i do not see the block at all. I started seeing it fixed position only when I scroll back up. If you can provide any input, it would be great. But in laptop browser, block is always in fixed position.
-
Hello, I have a phone number block. I applied the below css to have the phone number fixed. It works on my laptop when I make the screen less than 768px. However, when I visit the page on my galaxy phone, that phone no block not fixed. .PhoneNo { position: fixed; z-index: 2; } I have done that many times. I am not sure why it would not work now. Please advise.
-
Set ExcelObj = createobject("excel.application") ExcelObj.Visible = true Set ExcelConfigFile = ExcelObj.Workbooks.Open (Path) Set Sheet = ExcelConfigFile.Worksheets("Scripts") TotalRow = Sheet.UsedRange.Rows.Count Hello, So far, I get total number of row of the sheet. I have a column called "key". How can I count total number of rows in the key column? Thanks.
-
Hi, Every time I create an order I get a confirmation page with the below information. I need to be able to write a function which will return the data I am looking for. How can I write a Function that returns specific data? Data I get after submission: "Student ID: 100 Class ID: 99990444 Teacher ID: 610728" Function Should return "Student ID: 100" after I request for student id. Calling funciton: str = "Student ID: 100 Class ID: 99990444 Teacher ID: 610728" myStudentID = CallFunction(str, "Student ID", "") myClass = CallFunction(str, "Class ID", "") Function CallFunction(completeString, startSearch, endSearch) startPos = InStr(1,completeString,startSearch) CallFunction = mid(CompleteString,startPos,endSearch) End Function Note: Number of digits are unknown for each ID. Also, there is a space after each ID. Above function will not work. I am having trouble how to write the function. Please advise.
-
Sure I will do that.
-
Thank you much. This is exactly what I needed.
-
I read your answer multiple times but I could not understand completely. Below is what I tried. <div class="test"> <p> my paragraph </p> </div> .test { background-image: url(/sites/default/files/Fortune.png); background-repeat: no-repeat; background-size: cover; background-position: 0 100%; padding: 100px 15% 100px 15%; } .test::after { text-align: center; color: #221301; background-color: red; filter: blur(3px); opacity: .5; } I see the background image and then the paragraph on top. But I expected the background image to have red color with blur and opacity and I did not see it. Please advise.
-
Sorry, I am not able to follow you. My requirement is to have background image of test class then blur the image with a color. Are you asking me to set test class to no height, no bg color, etc. But I do need the bg image.
-
<div class="test"> <img src="test.png"></div> .test { background-color: red; } img { opacity: .5; filter: blur(3px); } Above works. Problem starts when I have background image for a div class. Then blurring the image does not work. .test { background-image: url("/sites/default/files/FortuneTeam-bg.png"); background-color: red;}
-
This is a complicated answer. Would that possible if you could provide html with css? Thanks.
-
Hi, I have an image. I am trying to apply blur feature on the image. Blur color can be anything. I also should be able to apply percentage of the color(brightness/contrast/etc.). I checked out the page but did not see anything with color. How can I do it? https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_all Thanks
-
I changed ul to ul{text-align: left; display: inline-block;} It worked. Thanks.