The sidebar in Semantic UI does not have a specified height for the form segment

Need help troubleshooting a button that slides out a vertical sidebar. I want to include a short form for users to input search queries within the sidebar.

The issue seems to be with the heights of #search-sidebar and .ui.form.segment.

Here is the code snippet:

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>

Answer №1

After some investigation, I discovered the solution. You need to enclose .ui.form.segment within a class="item" div. The reason for this additional step remains unclear to me.

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
<div class="item">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

I have implemented the appropriate code to showcase a background color, yet it doesn't seem to be appearing on the screen. Additionally, I am utilizing Sass in this project

Could someone help me understand why the background color is not showing on my website? This is the CSS I am using html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizi ...

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It&a ...

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

Adding multiple elements with varying content to a separate division

I am attempting to combine two div elements into a single div, but I'm encountering difficulties. Despite thoroughly examining my code, everything appears to be correct. Here's what I've tried so far. To assist me in achieving this, I am ut ...

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

What are the steps for implementing CSS in Markdown?

How can I incorporate a CSS class into a Markdown file? For example, using <i class="icon-renren"></i> (from the fontawesome library) should display an icon when its CSS file is imported in HTML. Is there a way to achieve this in Markdown? ...

Error: TweenLite has not been recognized

/justincavery/pen/mPJadb - this is a link to CodePen After copying the code from CodePen and running it, I encountered an error: "Uncaught ReferenceError: TweenLite is not defined". The image only draws once and there is no animation unless I press "F5 ...

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

I have encountered an issue with a modal view that contains content extending beyond its boundaries. To remedy this, I applied the overflow-y: scroll property. However, the problem arises when the modal view overlaps with the body, which also has scrolling ...

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

Adaptive website backdrop

I have created a unique background for my website design, which includes 3 slices labeled as div id top, middle, and bottom. You can view the design in this image. I am interested in making this background responsive. While I have come across examples of ...

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...

How to align all children at flex-start while positioning one child at the end?

I am currently working on a flex container that has 3 children. My goal is to have all the children align at flex-start, with the final child positioned at the bottom of the container. Can align-content be combined with align-self to achieve this layout? ...